Div 高度自适应填充父容器

Posted 2023-03-16

例如：

<div id="A">
<div id="B">
</div>
<div id="C">
</div>
</div>
层B的高度由于内部控件的变化而引起高度发生变化，此时层C的高度应自动调整，达到A始终被填满的效果。

参考技术A 这个简单，在的css属性里加overflow:hidden，然后在C的css属性里加margin-bottom:-1000px;padding-bottom:1000px; 如果B的高度可能超过1000的话，再设大点就行了 参考技术B 我一般都用jquery写自适应，代码如下:
$("div#A").height(Math.max($("div#B").height(),$("div#C").height()));
希望对你有帮助~ 参考技术C 这个问题是不是有问题啊。
1；达到A始终被填满的效果可以得知A的高度是一定的对吗？
2；既然A的高度是一定的，A中的B高度不定，B的高度会不会超过A的高度呢？
3；如果A的高度是未定的，那么B的高度也未定，又何来的填满呢？
4；是我的理解有误区还是楼主没有表达清楚？
5；如果单纯实现高度自适应的话，其实真心的很简单，A的高度不定，B C的高度也不定就行了啊，这样不美观的话再加上padding属性调一下距离，应该就可以了。
6；个人的一点小观点，好坏勿喷，谢谢！追问

B不会太大，只会占到高度的20%左右，C 需要充满剩下的高度。我今天百度了好久看到大家大部分的做法是使用JS计算高度。好像CSS里没有合适的办法。

追答

我真的很奇怪啊，你直接不给A和C高度不就行了嘛，让它们自适应，不管多高都可以啊。

追问

A 大小可以认为是固定的，　C　是有内容和边框等东西的，不给C设定高度的话，C在A中是无法填满A的

追答

如果A固定的话，C不定，万一C的高度超出A怎么办？
如果给C设定高度，直接A的高度减去B的高度不就是填满后C的高度吗？

追问

如果A固定的话，C不定，万一C的高度超出A怎么办？

就是不想让C超出A或者A没被C填充满。
你根本就是问问题的。。。不是来回答的吧

追答

大哥，你上面自己说得啊。
这是你的原话：“此时层C的高度应自动调整，达到A始终被填满的效果。”
如果不让A充满，那很简单啊 ，不就是父DIV包含两个子DIV吗？

本回答被提问者和网友采纳