gpt4 book ai didi

html - CSS填充父可用空间

转载 作者:太空宇宙 更新时间:2023-11-03 23:34:35 24 4
gpt4 key购买 nike

我知道这个问题被问过很多次,但我没有找到解决问题的方法。

我有这个 html 代码:

<html style="height: 100%">
<body style="height: 100%">
<div style="height: 100%">
<div>Title</div>
<div style="height: 100%">Content</div>
</div>
</body>
</html>

我希望我的包含内容的 DIV 将填充父 div 中的剩余空间。
我之前看到的每个问题都说在子 DIV 中执行 style="height: 100%" 。使用 style="height: 100%" 它获得父 div 的相同大小,所以我的页面变得比 100% 大(页面有滚动条)。

height: 100%

(html、body 和父 div 标签与视口(viewport)相同)

我只想用可用的可用空间填充父 div,仅此而已。

fill available space

here你可以找到活生生的例子。

我可以吗?

最佳答案

为什么要让 title 100% 高度......没有意义......一般的想法是有一个 container具有 100% 高度,并在其中创建子类 div

  • 使标题 20% 和内容 80% - 最好,最好的选择
    fiddle

  • 或在content 上使用overflow:hidden - 只有当您确定内容不会超出隐藏范围时,才可以使用此选项仅在内容不存在时隐藏多余的 div

  • 或在 css 中使用 calc() ( cross browser but not supported by old browser )
    fiddle

关于html - CSS填充父可用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24466595/

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