将网站内容居中而不重叠页眉和页脚答案

【问题标题】：Centering site content without overlapping header & footer将网站内容居中而不重叠页眉和页脚
【发布时间】：2012-11-23 11:03:47
【问题描述】：

我有一个带有页眉、页脚和内容区域的基本网站结构。我能找到的几乎所有将页面内容居中的解决方案都使用 CSS 绝对定位，设置内容 div 的边距，并使其浮动在浏览器窗口的中心。但是，当窗口尺寸减小时，这会导致内容覆盖页眉和/或页脚。相反，我希望页面在无法放入窗口时滚动。

以下是页面截图：

带有红色边框的区域应垂直居中，不覆盖任何其他元素。

这是我正在使用的 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/

感谢您的帮助。

【问题讨论】：

在此类问题中，我建议显示两个屏幕截图，一个是您想要的情况，另一个是您不希望的情况。我很困惑。
小礼物jsfiddle.net/gudmN/1我觉得比下载好——解压，运行代码
你能发布你想要的结果图片你到底在看什么......
不清楚你想要达到什么目的

标签： html css

【解决方案1】：

1) 将margin: 0 auto; height: auto; float: left 添加到.articlecontainer。
2）制作页眉和页脚float: left; width: 100%; height: 48px

【讨论】：