CSS让内部容器高度随着父容器高度变化的解决办法

作者:MJ 发布于:2012-11-8 7:58 Thursday 分类:Css

使用position绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化效果,我们在重构页面时间经常会碰到使用一个外部大容器里面放置两个左右浮动容器的布局,有时候为了视觉效果,我们需要让里面两个子容器的高度必须保持一致,但是在无法确定的容器具体高度的情况下(因为DIV容器经常需要根据里面内容的多少来自定义高度),那么我们唯一的办法就是让里面的容器高度跟随外部父容器高度变化而变化,但是我们如果我们纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度,貌似都无法实现让内部容器高度随着外部父容器高度变化而变化,所以我们必需要使用position绝对定位属性来配合协助实现。

 

请看下面案例:这个左边导航div高度会随着外部box父div的高度变化而变化,而box父div高度是根据里面那个右边div中的内容多少而自适应变化。


标签: 自定义高度

Powered by 588cy.com