css 填充div剩余高度_html/css_WEB-ITnose

我的代码如下：

回复讨论(解决方案)

只能用JS去解决了

bottom的高度和宽度使用百分比，即100%试一试。

bottom的高度和宽度使用百分比，即100%试一试。

top是有一个高度的，用100%的话，会超出的。

只能用JS去解决了

就是不想用js的方式解决啊、、、、

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

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

用position试试看，然后main跟bottom的高度用百分比。

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

根据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%}

CSS是可以的

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

CSS是可以的

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

你这是

CSS是可以的

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

你这是

原??不?

BiLin AI

免费的多语言AI搜索引擎

下载

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

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高度。不过很感谢，又提出了一个很好地方法！

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高度。不过很感谢，又提出了一个很好地方法！

.main{
    box-sizing : border-box;
}

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高度。不过很感谢，又提出了一个很好地方法！

.main{
    box-sizing : border-box;
}

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

还是贴一下代码吧：