前言
相信在平時寫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設置百分比無效(因為父元素沒有設置固定高度的原因)
以及如何實現高度自適用的布局方法