height in css
2018-03-27 本文已影响4人
浩神
除了table和行内元素之外的几乎所有的html元素都能添加height属性。
height的值有三种：
- auto （默认值， 浏览器自行计算）
- 固定的值 （可用rem，em，px等）
- 百分比
前两种赋值很好理解， 但如果如果一个元素的高度是百分比数值，需要注意以下几种情况：
- 如果对html设置height：50%。这个百分比是相对viewport而言的
- 如果父元素没有显示地指定高度，且该元素不是绝对定位或固定定位元素，对该元素设置100%是无效的。（等同于auto）
怎么理解没有显式地指定高度
- 如果外层有一固定高度的容器，中间多层嵌套使用百分数指定高度是可以的。
<style>
.div-1 {
border: 2px solid red;
height: 200px;
}
.div-2 {
border: 2px solid green;
height: 80%;
}
.div-3 {
border: 2px solid blue;
height: 80%;
}
</style>
</head>
<body>
<div class="div-1">
div1
<div class="div-2">
div2
<div class="div-3">
div3
</div>
</div>
</div>
</body>
image.png
如果父级元素使用min-height这种不明确的高度指定，子元素使用百分数设置高度无效！
<style>
.div-1 {
border: 2px solid red;
height: 200px;
}
.div-2 {
border: 2px solid green;
min-height: 80%;
}
.div-3 {
border: 2px solid blue;
height: 80%;
}
</style>
</head>
<body>
<div class="div-1">
div1
<div class="div-2">
div2
<div class="div-3">
div3
</div>
</div>
</div>
</body>
image.png
