[CSS]使用絕對定位屬性來實現CSS內部子容器高度隨著外部父容器高度變化而變化
阿新 • • 發佈：2019-02-02
測試demo 原始碼：
div2 正確顯示時
css應該用position:absolute;來設定他的高度，如下程式碼
正解1
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"/> <title></title> <style> html, body{ height:100%; padding:0; margin:0; } .div1{ position:absolute; top:0; right:0; left:0; bottom:0; min-height:400px; background:red; } .div2{ height:100%; /*e8下 div->b的高度並沒有撐滿整個div->a容器*/ background:#abb904; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </body> </html>
現象1： 父容器存在min-height ，父容器高度使用position:absolute;來確定
縮放螢幕至div1的高度出現滾動條
正常瀏覽器下，div1，div2的高度都是400px（圖1）
IE8中，div1是以min-height:400px顯示的。div2 的高度等於螢幕的高度（圖2）
圖1
圖2
現象2 修改div2的高度height為auto 時
div1仍然是以min-height來讀取高度，div2 的高度為 0
.div1{ position:absolute; top:0; right:0; left:0; bottom:0; min-height:400px; background:red; } .div2{ height:auto; background:green; }
現象3 父容器存在min-height ，父容器高度使用position:relative;來設定,結果同現象2是一樣的。
.div1{
position:relative;
min-height:400px;
background:red;
}
.div2{
height:100%;
background:#abb904;
}div2 正確顯示時
css應該用position:absolute;來設定他的高度，如下程式碼
正解1
.div1{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
min-height:400px;
background:red;
}
.div2{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:green;
} .a{
position:relative;
min-height:400px;
background:red;
}
.b{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:#abb904;
}
總結：讓子容器高度跟隨外部父容器高度變化而變化，如果我們純粹使用使用height:100%;或者height:auto;來定義內部容器自適應高度，貌似都無法實現讓子容器高度隨著外部父容器高度變化而變化，所以我們必需要使用position絕對定位屬性來配合協助實現。