Question

我做到了：

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 px magin获取所有页面的高度）？

Answer 1

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

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

您应该添加height: 100px或只添加一些内容，您会看到它达到了高度。

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

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

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

修改

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

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

最后，要将“页脚”和“标题”设为“粘贴”，请参阅http://jsfiddle.net/VpwQQ/8/

Answer 2

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

Main现在有100％的宽度。

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

我分道扬琴：http://jsfiddle.net/8U9P6/

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

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

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

Answer 3

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

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

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

注意：您可能需要使用height: 100%和body元素上的html bottom调整大小来处理#main元素。

Answer 4

用内容填充#main div后，它会根据内容自动获得高度。您只需使用lorem ispum的几个段落填充它即可模拟内容。您现在可以删除绝对位置和定位CSS。

使用“0 auto”速记居中div只适用于父元素（对于#main div，是body元素）具有已定义的宽度。要做到这一点，尝试给你的身体元素宽100％。这样做是你可能想要养成CSS的习惯。

要让#main div始终比#header div低20px，只需将20px的margin-bottom添加到#header div。在#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/

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

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

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

4 个答案: