gpt4 book ai didi

html - 显示表格html困惑

转载 作者:行者123 更新时间:2023-11-28 00:04:41 27 4
gpt4 key购买 nike

所以我试图用一些基本的东西来构建一个布局:一个有固定大小的标题;和内容,只允许与页面一样大 - 任何溢出都应该在其中滚动。

我似乎无法让内部 div 只滚动并让溢出停留。

CSS:

body {
display:table;
width: 100%;
}
#content-body,#header {
display:table-row;
}

#content {
text-align: center;
height: 100%;
width: 50%;
overflow-y: scroll;
background-color: red;
}

HTML:

<body>
<div id="header">
header here
</div>

<div id="content-body">
<div id="content">
<-- Need this to scroll -->
</div>

</div>
</div>
</body>

JSFiddle

我只想用 css 和 html 来完成这项工作

有人请帮助我!我有点困惑为什么这不起作用

最佳答案

您根本不需要 display: table,这不会为您解决问题。

既然你知道标题的高度,你真正需要做的就是给 #content 一个 position: absolute(相对于 body 标签默认情况下,如果它没有包含在任何具有 relative 位置的东西中)。然后你可以从它需要开始的地方(标题的底部)一直拉伸(stretch)到底部这样做:

#content {
position: absolute;
top: 150px; /* or whatever your header height is */
bottom: 0;
}

请参阅我的 jsfiddle 示例:http://jsfiddle.net/W43UV/5/

(我将 body 的 padding 和 margin 设置为 0 以防止 top 偏移量被弄乱)

关于html - 显示表格html困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19146933/

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