DIV撑满父容器剩余高度



页面框架关系如下图:

如果使“用户组织”任务区的页面内部的DIV能够自动撑满显示区高度,需要将“外层DIV”的高度设为100%height:100%,但是这个100%是相对于父级元素的高度而定的,如果父级元素的高度不确定,这个100%是不起作用的,也就是说,外层div的所有父级页面的高度都要设置,有值,才能起作用,所以“外层DIV”所在页面的htmlbody要设置高度,可以用百分比设置,html,body{height:100%}

body{box-sizing:border-box;}

对页面的htmlbody必需添加以上两个样式,再将外层DIV的高度设为100%,并且禁止滚动条:

      .org_row{height:100%;overflow:hidden;}

org_row为外层DIVclass

      以上情况是针对body没有margin的情况,如果bodymargin,比如实际项目中,body的上左右,有10个像素的margin,则会出现上下滚动条,发现滚动的就是10像素,实在没有办法,将bodymargin改为pading

      .childrenBodyPadding{padding:10px10px0;}

则滚动条消失。

 

      对于上图中左侧部分,外层DIV中套了一个“第二级内嵌DIV”,其中上部有一个headdiv,下部是内容,下部的内容超出了屏幕,需要在内容部分的DIV出现滚动条,上部的head高度是确定的,42像素,下部需要根据父容器的高度,减去42像素,如果将“内容DIV”的高度设为100%,则“内容DIV”的高度也变成了“内嵌DIV”的高度(父容器的高度),最后的做法是:

在父容器(第二级内嵌DIV)加上样式:

style="height:100%;overflow:hidden;box-sizing:border-box;padding:73px 0 0;"

关键是box-sizing:bordere-boxpadding:73px 0 0;

使父容器有73像素的padding内边距,为head留出位置(虽然head的高度是42,但是内容DIVpaddingborder加起来有31像素,所以是73px

 

然后在headdiv上加上样式:

      margin-top:-73px;

head div向上挪73像素,挪到父容器的padding内边距中。

最后,让内容DIV的高度为100%即可,这时的内容DIV高度100%即是父容器高度减去headdiv的高度。

 


版权声明:本文为u012007592原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。