web容器如何自適應(yīng)視口大小
我要評(píng)論前言
在前端生涯上，經(jīng)常會(huì)遇到需要容器自適應(yīng)視口高度這種情況，本文將介紹我能想到的解決這個(gè)問題的方案。
基礎(chǔ)知識(shí)
html元素的高度默認(rèn)是auto（被內(nèi)容自動(dòng)撐開），寬度默認(rèn)是100%（等于瀏覽器可視區(qū)域?qū)挾龋瑳]有margin和padding；
body元素的高度默認(rèn)是auto，寬度默認(rèn)是100%，有margin而沒有padding；
若想讓一個(gè)塊元素（如div）的高度與屏幕高度自適應(yīng)，始終充滿屏幕，需要從html層開始層層添加height=100%，而又因?yàn)閔tml,body元素的width默認(rèn)就是100%,因此在里面的div 設(shè)定width=100%時(shí)就能和屏幕等寬。
方法一：繼承父元素高度
給html、body標(biāo)簽添加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的元素必須是塊級(jí)元素而且需要是body的直接子元素，也就是要設(shè)置height=100%，其父元素必須有高度
方法二：使用絕對(duì)定位(absolute)
給需要撐滿的容器添加絕對(duì)定位(absolute)，然后設(shè)置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);
}
注意：若目標(biāo)元素的父級(jí)元素沒有設(shè)置過相對(duì)定位（relative）或絕對(duì)定位（absolute）,那么目標(biāo)元素將相對(duì)于html定位，html不需要設(shè)置寬高；否則相對(duì)于其設(shè)置過相對(duì)定位（relative）或絕對(duì)定位（absolute）的父級(jí)元素定位，且其父級(jí)元素必須有寬度和高度,如下：
<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)
給需要撐滿的容器添加絕對(duì)定位(absolute)，然后設(shè)置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后，不需要理會(huì)父級(jí)元素是否有定位屬性，均能撐滿瀏覽器可視區(qū)域，但目標(biāo)元素不隨滾動(dòng)容器的滾動(dòng)而滾動(dòng)
方法四：使用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同樣需要父元素的有高度和寬度，否則不會(huì)撐開。
方法五：使用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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談移動(dòng)端中的視口(viewport)的具體使用
這篇文章主要介紹了淺談移動(dòng)端中的視口(viewport)的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2021-04-12