css fills the remaining height of div_html/css_WEB-ITnose

我的代码如下：
a1151789e2e3a08efc84d2d79aaf73bd
        253a6235234450c0aaa9bfc76d2b0259
        16b28748ea4df4d9c2150843fecfba68
        b3923501fa5609418311f1ba841e869f
        16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
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%}
a1151789e2e3a08efc84d2d79aaf73bd
    253a6235234450c0aaa9bfc76d2b0259
    16b28748ea4df4d9c2150843fecfba68
    b3923501fa5609418311f1ba841e869f
        30738ae84b9375bf5679f31555a10927
        16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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%;}

你这是
a1151789e2e3a08efc84d2d79aaf73bd
      b3923501fa5609418311f1ba841e869f
             253a6235234450c0aaa9bfc76d2b025916b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
这个意思吗？用top覆盖在bottom上，可以实现楼主说的效果吗？？

CSS是可以的

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

你这是
a1151789e2e3a08efc84d2d79aaf73bd
      b3923501fa5609418311f1ba841e869f
             253a6235234450c0aaa9bfc76d2b025916b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
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:
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
c9ccee2e6ea535a969eb3f532ad9fe89
* {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}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
643db4b2921b65416e550d5b62b0cd7c
473a967da286a3c736825b4619e7dc30
5cb90bb895da2f0175afc318fa092591
16b28748ea4df4d9c2150843fecfba68
ccbe0810cf632f527787de4594331004
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
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!