css fills the remaining height of div_html/css_WEB-ITnose

我的代码如下：

        

        

        

        

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

回复讨论(解决方案)

只能用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%;}

你这是

这个意思吗？用top覆盖在bottom上，可以实现楼主说的效果吗？？

CSS是可以的

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

你这是

Does this mean? Can the effect mentioned by the original poster be achieved by covering the bottom with top? ?

Original? No?

Example:
http://jsbin.com/hesuxonozula/2/edit

CSS is OK

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

This is okay, but one problem is that the height of main will increase the height of top. If there is a parent div outside main, and the main If height is set to 100%, then the total height of main will exceed the height of the parent div. But thank you very much for proposing another good method!

CSS is OK

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

This is OK, but there is a problem that the height of main will be Increase the height of top. If there is a parent div outside main and set the height of main to 100%, then the total height of main will exceed the height of the parent div. But thank you very much for proposing another good method!

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

CSS is OK

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

This way is OK, but there is a problem that the height of main will increase the height of top. If there is a parent outside main div, and set the height of main to 100%, then the total height of main will exceed the height of the parent div. But thank you very much for proposing another good method!


.main{
box-sizing : border-box;
}
God, it sure works! ! !
Thank you very much! ! !

Let’s post the code:

In this way, no matter how the height of outer changes, the height of bottom is the height of main minus the height of top, and the height of top is fixed.
Thanks to classmate u012280941!