不重叠页眉和页脚使网站内容居中

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

这里是页面的屏幕截图： layout -- area with red border should be vertically centered

与红色边框面积应垂直居中，而不覆盖任何其它元件。

下面是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/

谢谢你的帮助。

来源

2012-11-23 antalkerekes

在我推荐显示两个屏幕截图，你想要的情况之一，另一个是你不想要的情况这样的问题。我很困惑。 – SaidbakR

小礼物给你http://jsfiddle.net/gudmN/1/我认为比下载更好 - 解压缩，得到你的代码 – sbaaaang

你可以发布你想要的结果图片你到底在看什么....... –