前言
在前端生涯上，經常會遇到需要容器自適應視口高度這種情況，本文將介紹我能想到的解決這個問題的方案。
基礎知識
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> <body> <div class="example"> </div> </body> <html> 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，如下：
<html> <body> <div class="example"> </div> </body> <html> .example{ position: absolute; top:0; left:0; bottom:0; right:0; background:rgb(55, 137, 243); }注意：若目標元素的父級元素沒有設置過相對定位（relative）或絕對定位（absolute）,那么目標元素將相對于html定位，html不需要設置寬高；否則相對于其設置過相對定位（relative）或絕對定位（absolute）的父級元素定位，且其父級元素必須有寬度和高度,如下：
<html> <body> <div class="example2"> <span class="example"></span> </div> </body> <html> .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，如下：
<html> <body> <div class="example"> </div> </body> <html> .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> <div class="example"> </div> </body> <html> html,body{ width:100%; height:100%; } body{ display: flex; } .example{ background:#fc1; flex:1 1 auto; }注意：使用flex同樣需要父元素的有高度和寬度，否則不會撐開。
方法五：使用javascript獲取瀏覽器高度
<html> <body> <div class="example"> </div> </body> <html> <script> let example = document.getElementById('example') let height = document.documentElement.clientHeight example.style.height = `${height}px` </script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
