gpt4 book ai didi

html - 页眉 + 内容 + 带有嵌套所有内容的表单的页脚

转载 作者:行者123 更新时间:2023-11-28 13:24:57 27 4
gpt4 key购买 nike

我有以下 HTML,它有一个页眉、一个可滚动的内容和一个页脚,并且工作正常。

我想添加到此 HTML 的是一个包装所有三个 div 的表单,问题是一旦我用标签包装 div,布局就会中断。有什么建议吗?

<head>
</head>

<style>
<!--
body {
padding: 0px;
margin: 0px;
overflow: hidden;
}

* html body {
padding: 50px 0 50px 0;
}

div#header {
background-color: yellow;
position: absolute;
top: 0px;
height: 50px;
width: 100%;
}

div#content {
background-color: red;
position: fixed;
top: 50px;
bottom: 50px;
overflow: auto;
width: 100%;
height: 100%;
}

div#footer {
background-color: blue;
position: absolute;
bottom: 0px;
height: 50px;
width: 100%;
}
-->
</style>

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

<div id="content">
bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br />
bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br />
bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla<br /> bla last<br />
</div>

<div id="footer">footer</div>
</body>

最佳答案

如果我理解你..你的问题是position:absoluteposition:fixed你给他们的。

当您将它们包装在 <div> 中时你必须给那个 div position (例如相对)。 absolute 和 fixed 元素与 closest positioned 元素相关。在您的情况下..无论您将它们包裹在 10 个 div 中..最接近的定位元素仍然是 BODY

关于html - 页眉 + 内容 + 带有嵌套所有内容的表单的页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14275468/

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