css は 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
ということでしょうか？元の投稿者が言及した効果は、下部を上部で覆うことで達成できますか? ?
オリジナル?? いいえ?

?例:
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%;}

これは問題ありませんが、現時点では問題がありますメインの高さはトップの高さを増加させます。メインの外側に親 div があり、メインの高さが 100% に設定されている場合、メインの合計の高さは親 div の高さを超えます。でも、別の良い方法を提案していただき、本当にありがとうございます！

CSS は OK です

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

これは OK ですが、main の外に親 div があり、main の高さが設定されている場合、main の高さによってトップの高さが増加するという問題があります。 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%;}

現時点では問題があります高さメインの外側に親 div があり、メインの高さを 100% に設定すると、メインの合計の高さが親 div の高さを超えます。でも、別の良い方法を提案していただき、本当にありがとうございます！


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

なんと、本当にうまくいきます！ ！ ！ ありがとうございます！ ！ ！

コードを投稿しましょう: 93f0f5c25f18dab9d176bd4f6de5d30e

* {padding:0px; margin:0px}
.main {幅:100%; パディングトップ:100px; ボックスサイズ:ボーダーボックス} .top {高さ:100%; :blue} .bottom {height:100%; width:100%;background:green}
9c3bca370b5104690d9ef395f2c5f8d1
643db4b2921b65416e550d5b62b0cd7c 473a967da286a3c736825b4619e7dc30
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
このように、アウターの高さがどれだけ変化しても、ボトムの高さはトップの高さを引いたものになります。トップの固定です。
クラスメートu012280941に感謝します！