您现在的位置是：网站首页> 编程资料编程资料

CSS让子元素div的高度填满父容器的剩余空间的方法CSS实现子元素div水平垂直居中的示例

2021-09-02 1084人已围观

简介这篇文章主要介绍了CSS让子元素div的高度填满父容器的剩余空间的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

效果图：

代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果)

高度充满父容器 固定高度 
 自适应父容器, 充满剩余的空间

代码如下：（推荐使用此种方法，没有上面的那种方法的缺点）

高度充满父容器 固定高度 
 自适应父容器, 充满剩余的空间

到此这篇关于CSS让子元素div的高度填满父容器的剩余空间的方法的文章就介绍到这了,更多相关CSS子元素div高度填满剩余空间内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！