資訊專欄INFORMATION COLUMN
摘要：前言在前端生涯上，經常會遇到需要容器自適應視口高度這種情況，本文將介紹我能想到的解決這個問題的方案。方法五使用獲取瀏覽器高度
前言
在前端生涯上，經常會遇到需要容器自適應視口高度這種情況，本文將介紹我能想到的解決這個問題的方案。基礎知識
html元素的高度默認是auto（被內容自動撐開），寬度默認是100%（等于瀏覽器可視區域寬度），沒有margin和padding；
body元素的高度默認是auto，寬度默認是100%，有margin而沒有padding；
若想讓一個塊元素（如div）的高度與屏幕高度自適應，始終充滿屏幕，需要從html層開始層層添加height=100%，而又因為html,body元素的width默認就是100%,因此在里面的div 設定width=100%時就能和屏幕等寬。
方法一：繼承父元素高度給html、body標簽添加css屬性height=100%，然后在需要撐滿高度的容器添加css屬性height=100%，如下：
html{
height:100%;//讓html的高度等于屏幕
}
body{
height:100%;
margin:0;
}
.example{
width: 100%;
height:100%;
background:rgb(55, 137, 243);
}
注意：添加類名.example的元素必須是塊級元素而且需要是body的直接子元素，也就是要設置height=100%，其父元素必須有高度
方法二：使用絕對定位(absolute)給需要撐滿的容器添加絕對定位(absolute)，然后設置top、left、right、bottom分別為0，如下：
.example{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
background:rgb(55, 137, 243);
}
注意：若目標元素的父級元素沒有設置過相對定位（relative）或絕對定位（absolute）,那么目標元素將相對于html定位，html不需要設置寬高；否則相對于其設置過相對定位（relative）或絕對定位（absolute）的父級元素定位，且其父級元素必須有寬度和高度,如下：
.example2{
position: relative;
width:100%;
height:100px;
}
.example{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
background:rgb(55, 137, 243);
}
方法三：使用固定定位(fixed)
給需要撐滿的容器添加絕對定位(absolute)，然后設置top、left、right、bottom分別為0，如下：
.example{
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgb(55, 137, 243);
}
注意：使用fixed后，不需要理會父級元素是否有定位屬性，均能撐滿瀏覽器可視區域，但目標元素不隨滾動容器的滾動而滾動
方法四：使用flex布局給需要撐滿的容器的父元素添加display：flex，然后給撐滿的元素添加flex：1 1 auto，如下：
html,body{
width:100%;
height:100%;
}
body{
display: flex;
}
.example{
background:#fc1;
flex:1 1 auto;
}
注意：使用flex同樣需要父元素的有高度和寬度，否則不會撐開。
方法五：使用javascript獲取瀏覽器高度
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114648.html
摘要：前言在前端生涯上，經常會遇到需要容器自適應視口高度這種情況，本文將介紹我能想到的解決這個問題的方案。方法五使用獲取瀏覽器高度 前言 在前端生涯上，經常會遇到需要容器自適應視口高度這種情況，本文將介紹我能想到的解決這個問題的方案。 基礎知識 html元素的高度默認是auto（被內容自動撐開），寬度默認是100%（等于瀏覽器可視區域寬度），沒有margin和padding； body元素的...
摘要：還有視口相關單位，依賴瀏覽器的視口大小來定義長度的。如果你不熟悉視口相關單位的話，在這里簡單介紹一下。筆記視口相關單位對于大多數瀏覽器還是一項比較新的特性，所以當你試圖把這個特性和其他樣式混搭時，有可能會有一些很奇怪的。 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對rel...
摘要：本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號，還可以設置任何盒模型的屬性，比如有一點優勢就是可以和媒體查詢配合，實現響應式布局運用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕，可以讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化。...
閱讀 3451·2019-08-30 10:54
閱讀 3147·2019-08-29 16:38
閱讀 2165·2019-08-26 14:06
閱讀 1512·2019-08-23 15:39
閱讀 3034·2019-08-23 15:37
閱讀 2882·2019-08-23 13:50
閱讀 3189·2019-08-22 17:14
閱讀 2374·2019-08-22 15:44
