0

我做的：

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/

但正如你所见，maindiv 没有高度。

然后我用那个替换了我的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 px 的大小占据所有页面的高度）？

4

4 回答 4

1

我不确定你要做什么，但我会解释你的代码会发生什么：

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

您应该添加 aheight: 100px或仅添加一些内容，您会看到它得到一个高度。

我问你想做什么的原因是因为你不太清楚你想要你的最终产品是什么样子。

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

您应该使用position: fixed，但这会将其保留在窗口的底部而不是文档的底部。因此，您会遇到必须使用 Javascript 来测量文档高度和适当设置位置的问题。不知道你想做什么，但如果你只是想布局一个网站，那么使用标准的相对定位将页脚自然地推到 #main div 下方。

编辑：

如果您只是尝试设置正常的网站布局，请参阅http://jsfiddle.net/VpwQQ/4/ 。

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

最后，要让页脚和页眉都“粘贴”，请参阅http://jsfiddle.net/VpwQQ/8/

于 2012-08-01T14:57:50.427 回答
1

我在#main 中添加了一个div。

Main 现在有 100% 的宽度。

在里面，放一个 300px 的 div，没有绝对位置。

我叉了你的小提琴：http: //jsfiddle.net/8U9P6/

就我个人而言，我更喜欢 javascript 解决方案，而不是使用绝对位置。但这个解决方案似乎有效。

添加并溢出以包含内部 div 中的内容：http: //jsfiddle.net/M2nZc/

请注意，页面不会增长，因为它是绝对位置。

于 2012-08-01T15:02:43.820 回答
1

您不能在绝对定位的元素上使用自动边距，因为它不再在文档流中。

width: 100%在div 上使用#main，然后在其中放置另一个元素，使用自动边距居中。

演示：http: //jsfiddle.net/Guffa/VpwQQ/9/

注意：您可能需要height: 100%在body和html元素上使用bottom尺寸才能对#main元素起作用。

于 2012-08-01T15:05:49.957 回答
0

一旦你用内容填充你的#main div，它会根据内容自动增加高度。您可以简单地用几段lorem ispum填充它来模拟内容。您现在可以删除绝对位置和定位 CSS。

仅当父元素（对于#main div 是主体元素）具有定义的宽度时，使用“0 auto”简写使 div 居中。为此，请尝试为您的 body 元素设置 100% 的宽度。这样做是您可能希望在 CSS 中养成的习惯。

要让你的#main div 总是比 #header div 低 20px，只需在 #header div 中添加 20px 的 margin-bottom 即可。在#main div 下方执行相同操作以分隔页脚。

总结一下（暂时没有底部的页脚）你的 CSS 可能会是这样的：

body {
  width: 100%
  margin: 0px;
}

#header {
  width: 100%;
  height: 60px;
  margin-bottom: 20px; /*here we space the header 20px from the next element*/
  background-color: black;

}

#main {
  width: 300px;
  margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
  border:1px dotted black;
}

#footer {
  width:100%;
  height:40px;
  background-color:black;
}

示例：http: //jsfiddle.net/WEx3j/

如果您希望页脚具有“粘性”（始终位于网站的最底部），我建议您采用这种方法。

我希望这能澄清一些事情。

于 2012-08-01T15:11:31.463 回答