gpt4 book ai didi

html - height 100% 不包括y-溢出内容?

转载 作者:太空宇宙 更新时间:2023-11-03 21:50:31 25 4
gpt4 key购买 nike

我有一个页面,其内容包含在 <html></html> 中- 我正在尝试让侧边栏一直向下延伸到页面底部,即使存在垂直溢出也是如此。

如果没有垂直溢出,这是有效的,但如果有,侧边栏只会停在页面加载时页面底部所在的位置。

如果我使用 chrome 开发工具,我可以看到所有元素 - 一直到 <html> , 将它们的高度限制为加载时窗口的大小。这是正常的吗?如果我能告诉 <html> 我的问题就解决了以某种方式垂直跨越以包含所有内容,但我不知道这是否是正确的解决方案。

我已将侧边栏和所有父级设置为 height:100%,包括 html:

html, body, .durandal-wrapper, #shell-row, #sidebar {
height: 100% !important;
}

我一直致力于在 jsfiddle 中获取此 demod,但无法使其正常工作。这是我这边的样子:

enter image description here

最佳答案

您可以使用 css 表格来实现这一点。

FIDDLE1 FIDDLE2

标记

<div class="container">
<div class="sideBar">sideBar</div>
<div class="main">
Content.
</div>
</div>

CSS

.container
{
display: table;
}
.sideBar
{
display: table-cell;
background:pink;
width: 100px;
}
.main
{
display: table-cell;
background:yellow;
overflow:auto;
vertical-align: top;
}

关于html - <html> height 100% 不包括y-溢出内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17642479/

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