我有一个带有页眉、页脚和内容区域的基本站点结构。 我能找到的几乎所有使页面内容居中的解决方案都使用 CSS 绝对定位，设置内容 div 的边距，并使其 float 在浏览器窗口的中央。 但是，当窗口的大小时，这会导致内容覆盖页眉和/或页脚。 相反，我希望页面在无法放入窗口时滚动。
页面截图如下:
红色边框区域应垂直居中，不覆盖任何其他元素。
这是我正在使用的 HTML 和 CSS:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout Test</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header Content</div>
<div class="articleContainer">
<div class="articleLeft">
<div class="articleTitle">
<h1 class="articleTitle">Title</h1>
</div>
<div class="articleText">
<p>Lorem ipsum ...</p>
</div>
</div>
<div class="articleRight">
<div class="articleImage"></div>
</div>
<div class="stepper">Stepper</div>
</div>
<div class="push"></div>
</div>
<div class="footer">Footer Content</div>
</body>
</html>
CSS:
@charset "UTF-8";
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -48px;
}
.header {
text-align: center;
background-color: #7FF152;
height: 48px;
}
.articleContainer {
background-color: #CCFFFF;
margin-right: auto;
margin-left: auto;
width: 700px;
clear: both;
min-height: 240px;
position: relative;
border: medium solid #FF0000;
}
.articleLeft {
float: left;
height: 450px;
width: 330px;
}
.articleTitle {
text-align: center;
margin: 20px;
}
.articleText {
max-height: 350px;
overflow: auto;
}
.articleRight {
float: right;
height: 450px;
width: 330px;
background: url(articleImage.fw.png) no-repeat center center;
}
.stepper {
clear: both;
text-align: center;
background-color: #FFFF00;
}
.footer {
background-color: #CC6633;
text-align: center;
height: 48px;
}
.footer, .push {
height: 48px; /* .push must be the same height as .footer */
}
我已将两者上传到此处:http://cl.ly/3f2o1v0U2c0k
这是 jsfiddle:http://jsfiddle.net/gudmN/1/
谢谢你的帮助。
最佳答案
1) 添加 margin: 0 auto;高度:自动； float: left 到 .articlecontainer.
2) 使页眉和页脚 float: left;宽度:100%；高度:48px
关于html - 使网站内容居中，页眉和页脚不重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13527787/