CSS難點 為什麽height設置100%會失效，分欄目等高布局(高度自適用布局)的實現方案
前言
相信在平時寫CSS的時候大家都或多或少遇見過設置了height為百分比的時候發現不起作用。今天我們就來一探究竟
原因：父元素未設置具體高度，子元素設置height:100%是無效的。
現象以及方案
[1] 設置高度為100%時，無法實現全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .case-box{ height: 100%; background:red; } </style> </head> <body> <div class="case-box"></div> </body> </html>
這樣寫，你會發現一點效果都沒有。
【解決方案】
增加如下代碼：
html,body{
height: 100%;
}[2] 一個父元素中包含2個子元素，其中一個子元素非常高，撐開了父元素，另外1個子元素設置高度為100%失效。
<style> .case-box{ overflow: hidden; } .height-max{ width: 200px; height:400px; background: #167be0; float:left; } .height-percent{ margin-right:20px; background: hotpink; width: 200px; height: 100%; padding:20px; float:left; } </style> <div class="case-box clearfix" data-case="f2"> <div class="height-percent"></div> <div class="height-max"></div> </div>
height-max 設置了高度是400px撐開了父級使得父級case-box高度也是400px，height-percent設置了高度為100%，本來我們期望會跟父級的高速一樣都是400px，可是它還是沒有高度(背景色是padding撐起來的)。
平時的布局經常可以碰到這樣的情況，需要根據一個塊的高度進行高度自適應布局，但是好像單純的設置高度為100%是無法實現的。
【方案一】
父元素case-box設置一個定高(視乎這樣壓根就滿足不了我們的需求)
【方案二】
使用position
<style> .case-box{ overflow: hidden; position: relative; } .height-max{ width: 200px; height:400px; background: #167be0; float:left; margin-left: 220px; } .height-percent{ margin-right:20px; background: hotpink; width: 200px; height: 100%; padding:20px; float:left; position: absolute; } </style>
[缺點]這樣使用會破壞原本的布局順序
【方案三】
使用flex
<style>
.case-box{
position: relative;
display: flex;
}
.height-max{
width: 200px;
height:400px;
background: #167be0;
}
.height-percent{
margin-right:20px;
background: hotpink;
width: 200px;
padding:20px;
}
</style>
不可否認flex布局還是非常方便的
[缺點]兼容性稍差
【方案四】
display: table
<style>
.case-box{
position: relative;
display: table;
}
.height-max{
width: 200px;
height:400px;
background: #167be0;
}
.height-percent{
background: hotpink;
width: 200px;
display: table-cell;
}
</style>
[缺點]margin失效
【最佳方案】
padding-bottom:3000px;margin-bottom:-3000px;
<style>
.case-box{
overflow: hidden;
zoom:1;
}
.height-max{
width: 200px;
height:400px;
background: #167be0;
margin-left: 220px;
}
// 需要自使用的塊設置好padding和margin
.height-percent{
background: hotpink;
width: 200px;
float:left;
padding-bottom: 3000px;
margin-bottom: -3000px;
}
</style>3000像素是個可變值，如果您的分欄高度不可能高度超過2000像素，您就可以設為2000像素，如果會超過3000像素，那麽您要修改值為4000像素或是更高。
父標簽的overflow:hidden屬性是必須的，否則會顯示溢出的內容
小結
通過本文學習了
為什麽height設置百分比無效(因為父元素沒有設置固定高度的原因)
以及如何實現高度自適用的布局方法
CSS難點 為什麽height設置100%會失效，分欄目等高布局(高度自適用布局)的實現方案