gpt4 book ai didi

html - 由于绝对位置而不是水平居中

转载 作者:太空宇宙 更新时间:2023-11-04 00:14:49 25 4
gpt4 key购买 nike

我做了这个:

HTML:

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

CSS:

body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}

http://jsfiddle.net/VpwQQ/2/

但是如您所见,main div 没有高度。

然后我用它替换了我的 css:

body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}

http://jsfiddle.net/VpwQQ/1/

但是,水平居中不起作用。

我该如何做这个设计(div 居中并且在页眉和页脚之间占据所有页面的高度 20 像素边距)?

最佳答案

我不确定你想做什么,但我会解释你的代码会发生什么:

您的#main div 没有高度,因为它没有高度 CSS 属性,也没有任何内容。

您应该添加一个 height: 100px 或者只添加一些内容,您会看到它获得一个高度。

我之所以问你想做什么,是因为你不太清楚你希望你的最终产品是什么样子。

页脚会有另一个问题。如果你使用绝对位置,它现在会粘在底部。将#main div 的高度设置得高得离谱,您会发现当您必须向下滚动页面时,页脚会停留在原处。参见 http://jsfiddle.net/VpwQQ/3/

您应该使用 position: fixed 但这会将其保留在 WINDOW 的底部而不是 DOCUMENT 的底部。因此,您会遇到必须使用 Javascript 才能正确测量文档高度和设置位置的问题。不确定您要做什么,但如果您只是想对网站进行布局,请使用标准相对定位将页脚自然地向下推到#main div 下方。

编辑:

参见 http://jsfiddle.net/VpwQQ/4/如果您只是想设置一个正常的网站布局。

如果您希望页脚始终“固定”在页面底部,那么您将需要使用 position: fixed 但我认为这不适用于所有浏览器。参见 http://jsfiddle.net/VpwQQ/6/

最后,要使页脚和页眉都“固定”,请参阅 http://jsfiddle.net/VpwQQ/8/

关于html - 由于绝对位置而不是水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11761823/

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