css 填充div剩余高度

拾雪在海边 2014-08-13 10:09:05

我的代码如下：
<div class="main">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
main这个div我做成了可以随意缩放改变其大小，即他的height和width是随时改变的，top这个div的高度是固定的，我想让bottom这个div的高度随着main这个div的高度改变而改变，填充剩余的部分，即始终等于main.height-top.height，请问如何用CSS的方式解决？

...全文

4697 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

拾雪在海边 2014-08-19

打赏
举报

还是贴一下代码吧： <html> <head> <style> * {padding:0px; margin:0px} .outer {height:300px; width:100%} .main {width:100%; height:100%; padding-top:100px;background:red;box-sizing:border-box} .top {height:100px; width:100%;position:absolute; top:0px;background:blue} .bottom {height:100%; width:100%;background:green} </style> </head> <body> <div class="outer"> <div class="main"> <div class="top"> </div> <div class="bottom"> </div> </div> </div> </body> </html> 这样，不管outer的高度如何变，bottom的高度都为main的高度减去top的高度，且top的高度固定不变。感谢u012280941同学！

拾雪在海边 2014-08-19

打赏
举报

引用 16 楼 u012280941 的回复:

[quote=引用 15 楼 WCFLMY 的回复:] [quote=引用 11 楼 u012280941 的回复:] CSS是可以的
.main{
    padding-top:40px;  /*top的高度 假設40px*/
    position:relative;
}
.top{
    position:absolute; /*固定在上面*/
    top:0;
    left:0;
    width:100%;
}
.bottom{
    height:100%;
}

这样子是可以，但是有个问题就是这时main的高度会增加top的高度，如果在main之外还有个父div，并将main的height设置成100%的话，那么main的总高度将会超出父div高度。不过很感谢，又提出了一个很好地方法！[/quote] .main{ box-sizing : border-box; }[/quote]

大神呐，果然可以！！！非常感谢！！！

XZowie 2014-08-19

打赏
举报

引用 15 楼 WCFLMY 的回复:

[quote=引用 11 楼 u012280941 的回复:] CSS是可以的

.main{
    padding-top:40px;  /*top的高度 假設40px*/
    position:relative;
}
.top{
    position:absolute; /*固定在上面*/
    top:0;
    left:0;
    width:100%;
}
.bottom{
    height:100%;
}

拾雪在海边 2014-08-18

打赏
举报

引用 11 楼 u012280941 的回复:

CSS是可以的

.main{
    padding-top:40px;  /*top的高度 假設40px*/
    position:relative;
}
.top{
    position:absolute; /*固定在上面*/
    top:0;
    left:0;
    width:100%;
}
.bottom{
    height:100%;
}

这样子是可以，但是有个问题就是这时main的高度会增加top的高度，如果在main之外还有个父div，并将main的height设置成100%的话，那么main的总高度将会超出父div高度。不过很感谢，又提出了一个很好地方法！

XZowie 2014-08-18

打赏
举报

範例： http://jsbin.com/hesuxonozula/2/edit

XZowie 2014-08-18

打赏
举报

引用 12 楼 w812083 的回复:

[quote=引用 11 楼 u012280941 的回复:] CSS是可以的

.main{
    padding-top:40px;  /*top的高度 假設40px*/
    position:relative;
}
.top{
    position:absolute; /*固定在上面*/
    top:0;
    left:0;
    width:100%;
}
.bottom{
    height:100%;
}

你这是 <div class="main"> <div class="bottom"> <div class="top"></div> </div> </div> 这个意思吗？用top覆盖在bottom上，可以实现楼主说的效果吗？？[/quote] 原結構不變

一只特立独行的doge 2014-08-16

打赏
举报

引用 11 楼 u012280941 的回复:

CSS是可以的

.main{
    padding-top:40px;  /*top的高度 假設40px*/
    position:relative;
}
.top{
    position:absolute; /*固定在上面*/
    top:0;
    left:0;
    width:100%;
}
.bottom{
    height:100%;
}

你这是 <div class="main"> <div class="bottom"> <div class="top"></div> </div> </div> 这个意思吗？用top覆盖在bottom上，可以实现楼主说的效果吗？？

拾雪在海边 2014-08-15

打赏
举报

引用 6 楼 pad1614 的回复:

main这个div你做成随意缩放是什么意思？是用鼠标可以拖动main这个div吗？

对，我做的就是一个类似文件夹的功能，打开后，可以拖动，可以缩放，在缩放时，main这个div的高度和宽度是在一直变化的，用js的方式当然可以解决，但我就是想用CSS的方式解决，不知道有没有好的方法

拾雪在海边 2014-08-15

打赏
举报

引用 5 楼 xmt1139057136 的回复:

在main中的高度确定后，减去top的高度，就是bottom的高度

这样说没错，但是如何用CSS实现？

XZowie 2014-08-15

打赏
举报

CSS是可以的

.main{
    padding-top:40px;  /*top的高度 假設40px*/
    position:relative;
}
.top{
    position:absolute; /*固定在上面*/
    top:0;
    left:0;
    width:100%;
}
.bottom{
    height:100%;
}

拾雪在海边 2014-08-15

打赏
举报

根据7楼pad1614同学的提醒，最后我采用的是这样的方法：将top的position设置为absolute，将bottom的heigth设置为100%，再在bottom里面添加一个div，其高度和top一样，这样top就会将其覆盖，bottom中剩下的内容则在top的下面显示出来，代码如下： .top {height:30px; width:100%;position:absolute} .top2 {height:30px} .bottom{height:100%} <div class="main"> <div class="top"> </div> <div class="bottom"> <div class="top2"> </div> </div> </div>