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
}

固定大小居中的div由扩展的div包围

1 个答案: