css div高度填满父容器剩余空间

来源：互联网发布：淘宝上假货卖正品价格编辑：程序博客网时间：2024/06/07 17:31

转自：http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

1.要实现的效果图:

描述: 吐舌头

如上图 ,红色部分固定高度100px ,绿色部分高度充满父容器剩余部分,高度为父容器高度-红色高度

实现代码一(最通俗的方式):

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>高度充满父容器</title></head><style>.parent {height: 500px;width: 300px;border: 1px solid red;/***/padding: 2px 2px;/***/}.nav {height: 100px;width: 100%;/*必须沾满宽度防止浮动*/float: left;/*必须*/background-color: red;}.content {height:100%;/*必须*/background-color: green;}</style><body><div class="parent"><div class="nav">固定高度</div><div class="content">自适应父容器, 充满剩余的空间 </div></div></body></html>

解释:

.nav固定高度 ,必须设置左浮动float:left .且其宽度为100%充满父容器宽度

.content 设置height:100% 就自适应充满剩余空间

实现代码二(相对,绝对定位):

.parent {position: relative;height: 500px;width: 300px;border: 1px solid red;/***/padding: 2px 2px;/***/}.nav {height: 100px;width: 100%;background-color: red;}.content {position:absolute;top: 100px;bottom: 0px;background-color: green;width: 100%;}

解释:

父容器设置position:relative ,

需要自适应的容器设置postion:absolute ,top:100px(固定高度容器.nav的高度) ,bottom:0px(与父容器底部)

阅读全文

0 0