我知道我的问题已在此站点上多次得到解决。但是，我似乎找不到答案。我正在尝试在我的页面上创建一个粘性页脚。我的页面分为 3 个部分。
- 顶
- 中间
- 底部
我已经创建了一个 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 最小高度中删除 pageTop 高度。这似乎是问题所在。
感谢您对此事的帮助。
最佳答案
大家好，感谢您给我一些指导。几天后，我终于得到了答案。
如上所述，我有 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负边距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26486999/