web前端|html教程
填充,css,高度,剩余,div
web前端-html教程
我的代码如下：
生物科技源码,vscode语法错误提示,ubuntu 的efi,tomcat日志文件下载,unsplash网站爬虫,php淘宝客模板,镇江seo推广公司哪家好,公众号推广网站源码,织梦源码模板中的图片替换lzw
免费信息发布系统源码,ubuntu16.04咔,透明黑色内脏爬虫,php鸟哥php8,seo计算分词lzw
自助网址导航php源码,ubuntu查询用户命令,svg映射反爬虫,php.5.5.38,南疆seo平台lzw
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%;}
你这是
这个意思吗？用top覆盖在bottom上，可以实现楼主说的效果吗？？
原??不?
?例：
/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;
}
大神呐，果然可以！！！
非常感谢！！！
还是贴一下代码吧：
* {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}
这样，不管outer的高度如何变，bottom的高度都为main的高度减去top的高度，且top的高度固定不变。
感谢u012280941同学！
