css - 固定大小居中的 div 被扩展的 div 包围

Question

我在一个网站上工作，客户想要类似这样的东西:http://www.csszengarden.com/?cssfile=202/202.css有几个叠加层附加到屏幕的边缘，而中心的文本以原始浏览器滚动条保持可用的方式包含。这种设计通过允许它至少通过一个额外的 div 垂直拉伸(stretch)而变得有 flex 。

关于我的设计的棘手部分:我有一个固定大小的 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
}