固定大小居中div被扩大divs包围

Question

我在一个网站上工作，客户想要有类似的东西：http://www.csszengarden.com/?cssfile=202/202.css 有几个叠加在屏幕的边缘，而在中心的文字包含在原始浏览器滚动条保持可用的方式中。这种设计通过允许其至少垂直穿过额外的div来制成弹性。

关于我的设计的棘手部分：我有一个固定大小的div，应该垂直居中和水平居中。我现在需要的是围绕居中的div的更多div，并随着用户调整窗口大小而扩展，以便作为叠加层来隐藏下面的文本。

这基本上是：http://imgur.com/TNaTU

所以细分进一步，我需要的是一种方法，有四个周围的div自动扩大或缩小其尺寸，使他们总是充满了所有的画面。

有没有办法做到这一点没有JavaScript？

Answer 1

• 这并非没有疯狂的黑客在IE7中工作，因为IE7不支持display: table and friends。
• 我会看看在IE7中做这项工作，如果这是你的需求。
• 经过IE8及最新版本的Firefox，Chrome，Safari，Opera的测试。

Live Demo（edit）

HTML：

<div id="top">top stretch</div> 
<div id="middle"> 

    <div id="middleContainer"> 
     <div class="stretch">left stretch</div> 
     <div id="fixed">fixed</div> 
     <div class="stretch">right stretch</div> 
    </div> 

</div> 
<div id="bottom"><div id="bottomContent">bottom stretch</div></div> 

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    overflow: hidden 
} 

#top, #bottom { 
    position: absolute; 
    left: 0; 
    right: 0; 
    text-align: center 
} 
#top { 
    top: 0; 
    height: 50% 
} 
#bottom { 
    bottom: 0; 
    height: 50% 
} 
#bottomContent { /* you don't need this if bottom won't hold "content" */ 
    position: absolute; 
    right: 0; bottom: 0; left: 0 
} 


#fixed { 
    width: 400px 
} 
#middle { 
    background: #ee1c24; 
    position: absolute; 
    width: 100%; 
    height: 300px; 
    top: 50%; 
    margin-top: -150px; /* height/2 */ 
    left: 0; 
    z-index: 1 
} 
#middleContainer { 
    display: table; 
    width: 100%; 
    height: 100% 
} 
.stretch, #fixed { 
    display: table-cell 
} 



/* just for demo */ 
#top, #bottom, .stretch { 
    background: #b5e61d; 
    border: 5px solid #000 
} 
#fixed { 
    border-top: 5px solid #000; 
    border-bottom: 5px solid #000 
}