css 填充div剩余高度_html/css_WEB-ITnose
程序员文章站
2022-06-01 08:39:27
...
我的代码如下:
main这个div我做成了可以随意缩放改变其大小,即他的height和width是随时改变的,top这个div的高度是固定的,我想让bottom这个div的高度随着main这个div的高度改变而改变,填充剩余的部分,即始终等于main.height-top.height,请问如何用 CSS的方式解决?
top是有一个高度的,用100%的话,会超出的。
就是不想用js的方式解决啊、、、、
这样说没错,但是如何用 CSS实现?
对,我做的就是一个类似文件夹的功能,打开后,可以拖动,可以缩放,在缩放时,main这个div的高度和宽度是在一直变化的,用js的方式当然可以解决,但我就是想用CSS的方式解决,不知道有没有好的方法
你这是
这个意思吗?用top覆盖在bottom上,可以实现楼主说的效果吗??
你这是
这个意思吗?用top覆盖在bottom上,可以实现楼主说的效果吗??
原??不?
这样子是可以,但是有个问题就是这时main的高度会增加top的高度,如果在main之外还有个父div,并将main的height设置成100%的话,那么main的总高度将会超出父div高度。不过很感谢,又提出了一个很好地方法!
这样子是可以,但是有个问题就是这时main的高度会增加top的高度,如果在main之外还有个父div,并将main的height设置成100%的话,那么main的总高度将会超出父div高度。不过很感谢,又提出了一个很好地方法!
.main{
box-sizing : border-box;
}
这样子是可以,但是有个问题就是这时main的高度会增加top的高度,如果在main之外还有个父div,并将main的height设置成100%的话,那么main的总高度将会超出父div高度。不过很感谢,又提出了一个很好地方法!
.main{
box-sizing : border-box;
}
大神呐,果然可以!!!
非常感谢!!!
这样,不管outer的高度如何变,bottom的高度都为main的高度减去top的高度,且top的高度固定不变。
感谢u012280941同学!
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上,可以实现楼主说的效果吗??
原??不?
?例:
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;
}
大神呐,果然可以!!!
非常感谢!!!
还是贴一下代码吧:
这样,不管outer的高度如何变,bottom的高度都为main的高度减去top的高度,且top的高度固定不变。
感谢u012280941同学!
推荐阅读
-
HTML/CSS中,DIV高度自适应的解决方法
-
CSS让子元素div的高度填满父容器的剩余空间的方法
-
Codeforces Round #156 (Div. 2)-A. Greg's Workout_html/css_WEB-ITnose
-
Codeforces Round #107 (Div. 2)-A. Soft Drinking_html/css_WEB-ITnose
-
Codeforces Round #191 (Div. 2)-A. Flipping Game_html/css_WEB-ITnose
-
前端基础??CSS+DIV布局_html/css_WEB-ITnose
-
DIV+CSS在不同浏览器中的表现_html/css_WEB-ITnose
-
Codeforces Round #279 (Div. 2)_html/css_WEB-ITnose
-
以下代码如何让DIV先隐藏_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose