gpt4 book ai didi

html - 如何使用滚动条(溢出时)和底部固定页脚制作自动高度内容?

转载 作者:太空宇宙 更新时间:2023-11-04 16:31:44 24 4
gpt4 key购买 nike

model

这可能吗?是|否|javascript?

好的。我会试试的。

这里必须是:

标题。固定大小,固定位置(上)

内容。动态高度,取决于窗口、页眉和页脚的大小。如果溢出则滚动。

页脚。始终底部固定位置。固定大小。

窗口。没有滚动(!重要)

附言。到窗口。有一个错误或什么的。如果是 Firefox 或 Opera 键“向下”- 向下滚动。即使“无滚动”- 已指定隐藏。

希望一切顺利


完成。谢谢。

<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
#header{
top:0;
left:0;
right:0;
height: 150px;
position:absolute;

}
#content {
position: absolute;
bottom: 150px; /*footer height*/
top:150px; /* header height */
left: 0;
right: 0;
background: yellow;
overflow: auto;
}

#footer {
position: absolute;
height: 150px;
bottom: 0;
left: 0;
right: 0;
background: red;
}
</style>
</head>
<body>
<div id='header'>
Header content
</div>
<div id="content">
dynamic content here
</div>
<div id="footer">
</div>
</body>
</html>

最佳答案

你真的可以提出一些更好的问题。

<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
#content {
position: absolute;
top: 0;
bottom: 150px;
left: 0;
right: 0;
background: yellow;
overflow: auto;
}

#footer {
position: absolute;
height: 150px;
bottom: 0;
left: 0;
right: 0;
background: red;
}
</style>
</head>
<body>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>

关于html - 如何使用滚动条(溢出时)和底部固定页脚制作自动高度内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4462105/

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