CSS高度:100% vs高度:auto

我在一次采访中被问到一个问题，“css height:100%和height:auto之间有什么区别?”

有人能解释一下吗?

178213 次浏览
小开

高度100% for大概是你的浏览器的内部窗口的高度，因为它是页面的父节点的高度。auto高度将是必须包含的最小的高度。

小开
最佳答案

height: 100%给出元素父容器高度的100%。

height: auto表示元素的高度取决于它的子元素的高度。

考虑以下例子:

高度:100%

<div style="height: 50px">
<div id="innerDiv" style="height: 100%">
</div>
</div>

#innerDiv将有height: 50px

高度:汽车

<div style="height: 50px">
<div id="innerDiv" style="height: auto">
<div id="evenInner" style="height: 10px">
</div>
</div>
</div>

#innerDiv将有height: 10px

小开

浏览器中的默认值是height: auto，但是height: X%以包含块的百分比定义高度。

小开

Height:100%工作，如果父容器有一个指定的Height属性，否则，它将不起作用


提交答案