gpt4 book ai didi

html - 让 div 占用剩余的空间(高度)?

转载 作者:太空狗 更新时间:2023-10-29 16:47:13 25 4
gpt4 key购买 nike

<分区>

HTML

<div class="container">
<div class="header">
<span>
<span>First</span>
</span>
<span>
<span>Second</span>
</span>
<span class="active">
<span>Thrid</span>
</span>
</div>
<div class="body">
<div class="Control1">
Content!
</div>
</div>
</div>

CSS

.container
{
height: 300px;
border: black 1px solid;
}

.container > .header
{
background: grey;
}
.container > .header > span
{
display: inline-block;
padding: 10px;
}
.container > .header > .active
{
background: black;
color: white;
}

.container > .body
{
height: 100%;
overflow: auto;
background: lightgrey;
}

http://jsfiddle.net/ytg8S/

我的问题是我有一个高度为 300 像素的容器 div,然后我有一个高度未知的标题(取决于它上面的元素数量和屏幕大小,它可能不止一行。)如果 .body 的内容多于可用空间,我该如何让 .body 占据剩余空间并显示滚动条??

我的第一个想法是摆弄绝对定位,但当我有不止一行的 .header 元素时,这不起作用..

我不能更改 html,因为它是由第三方组件生成的(我可以,但是这需要很多工作),如果可以的话,我宁愿避免使用 javascript..

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com