[分享]css元素占页面剩下高度

在网页的布局设计中，有时候需要让某个元素占满页面的剩余高度，这时我们可以使用CSS中的特殊属性来实现。CSS中提供了一些属性可以帮助我们实现元素占满页面的剩余高度，例如：height:100;和min...

在网页的布局设计中，有时候需要让某个元素占满页面的剩余高度，这时我们可以使用CSS中的特殊属性来实现。

CSS中提供了一些属性可以帮助我们实现元素占满页面的剩余高度，例如：

height:100%;

min-height:100%;

首先我们需要将页面的根元素（html和body）的高度设置为100%，这样才能使子元素的高度设置为100%是占满页面的剩余高度。

html,body{
    height: 100%;
} 

然后我们可以给需要占满页面剩余高度的元素设置height或min-height为100%，这样就可以让该元素占满页面的剩余高度了。

#element{
    min-height: 100%;
} 

需要注意的是，如果要使用height属性，那么父元素的高度也必须设置为100%。而min-height属性则没有这个限制。

除此之外，我们还可以使用CSS中的flex布局来实现元素占满页面剩余高度。我们可以将父元素的display属性设置为flex，然后给子元素的flex-grow属性设置为1，这样子元素就会自动占满剩余的高度。

.parent{
    display: flex;
    flex-direction: column;
}
.child{
    flex-grow: 1;
} 

总之，CSS提供的这些属性可以帮助我们实现元素占满页面剩余高度的需求，而且非常方便易用。