1.使用calc實(shí)現(xiàn)自適應(yīng) （需要父盒子寬高固定）
<style>
*{
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
height: 100%;
width: 100%;
background-color: bisque;
}
.top {
height: 100px;
background-color: skyblue;
}
.middle {
width: 100%;
height: calc(100% - 200px);
background-color: aquamarine;
}
.middleTop {
width: 100%;
height: 66px;
background-color: aliceblue;
}
.middlebottpm {
width: 100%;
height: calc(100% - 66px);
background-color: red;
}
.bottom {
height: 100px;
background-color:pink;
}
</style>
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>2.使用flex布局，兩欄布局，三欄布局文章來源：http://www.zghlxwxcb.cn/news/detail-509275.html
/*兩欄布局*/
<style>
*{
margin: 0;
padding: 0;
}
.box {
height: 1000px;
display: flex;
}
.left {
width: 100px;
height: 100%;
background-color: aqua;
}
.right {
height: 100%;
flex: 1;
background-color: silver;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>/*三欄布局*/
<style>
*{
margin: 0;
padding: 0;
}
.box {
height: 1000px;
display: flex;
}
.left {
width: 100px;
height: 100%;
background-color: aqua;
}
.middle {
height: 100%;
flex: 1;
background-color: skyblue;
}
.right {
height: 100%;
width: 100px;
background-color: silver;
}
</style>
<div class="box">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>文章就到這里啦，本人功力尚淺，若有不妥之處請(qǐng)諒解指正，謝謝！文章來源地址http://www.zghlxwxcb.cn/news/detail-509275.html
到了這里，關(guān)于HTML標(biāo)簽根據(jù)瀏覽器窗口大小自適應(yīng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
