Question

我知道我的问题在很多时候都在这个网站上得到解决。但是，我似乎无法找到答案。我试图在我的网页上创建一个粘性页脚。我的页面分为3个div。

顶
中间
底

我创建了一个layout.css文件。这是：

html,body { 
  margin: 0; 
  font-family: Tahoma, Geneva, sans-serif; 
  font-size: 14px; 
  height: 100%;
  margin: 0 auto;
  position:relative;
}

#pageTop {
  height: 90px;
}

#pageMiddle {

  min-height: 100%;
  margin-bottom: -50px;
}

#pageMiddle:after {
  content: "";
  display: block; 
}
#pageBottom, #pageMiddle:after {
  height: 50px; 
}

我不明白如何从pageMiddle min-height中删除pageTop高度。这似乎是个问题。

感谢您对此事的帮助。

Answer 1

大家好，谢谢你给我一些指示。几天后，我终于得到了答案。

如上所述，我有3个div：

顶
中间
底

我试图在我的底部div上应用粘性页脚。没有任何成功。

以下是我设法解决此问题的方法。

我将顶部和中间div插入包装div中。我的页面上只有2个主要div。它现在看起来像这样。

包装
- 顶
- 中东
底

这是css：

#wrapper{
    min-height: 100%;
    margin-bottom: -50px;
}
#top {
    width:1000px;
    margin:0 auto;
    height: 90px;
}

#middle {
    width:1000px;
    margin:0 auto;
}

#wrapper:after {
    content: "";
    display: block; 
}
#bottom, #wrapper:after {
    width:1000px;
    height: 50px; 
    margin:0 auto;
}

这是我的html模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My title</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrapper">
    <div id="top">Header</div>
    <div id="middle">Content</div>
<div id="bottom">Footer</div>
</body>
</html>

这很简单但有效。

再次感谢您的回复。

CSS3负边际问题

1 个答案: