CSS 中高度100%的问题

在处理 CSS 布局时,很多时候都会用到让元素高度为 100% 的场景,但我们写完 height: 100%; 后却发现没有生效,下面我们来看一下原因。

当元素高度为 100% 时,其实这个高度是相对于父元素而言的,即当前元素高度为父元素高度的 100%,但是在 HTML 中,所有元素的高度默认是由内容撑起来的,除非设置了高度相关的属性 heightmin-height 或者是采用 flex 布局。

看到这里这个问题基本上就解决了,下面看一下示例代码:

CSS 代码片段:

html, body {
height: 100%;
}

.box-one {
width: 100%;
height: 100%;
background-color: #f80;
}

HTML 代码片段:

<div class="box-one">box one</div>

当然,也可以使用 flex 解决,原理差不多:

html, body {
height: 100%;
}

body {
display: flex;
flex-direction: column;
}

.box-one {
flex: 1 1 auto;
width: 100%;
background-color: #f80;
}