固定大小居中div被擴大divs包圍

我在一個網站上工作，客戶想要有類似的東西：http://www.csszengarden.com/?cssfile=202/202.css 有幾個疊加在屏幕的邊緣，而在中心的文字包含在原始瀏覽器滾動條保持可用的方式中。這種設計通過允許其至少垂直穿過額外的div來製成彈性。固定大小居中div被擴大divs包圍

關於我的設計的棘手部分：我有一個固定大小的div，應該垂直居中和水平居中。我現在需要的是圍繞居中的div的更多div，並隨着用戶調整窗口大小而擴展，以便作爲疊加層來隱藏下面的文本。

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

所以細分進一步，我需要的是一種方法，有四個周圍的div自動擴大或縮小其尺寸，使他們總是充滿了所有的畫面。

有沒有辦法做到這一點沒有JavaScript？

來源

2011-03-03 t.heintz

是JAVASCRIPT完全出了問題？如果是這樣的話，那麼在中間的區塊中使用UL和LI的一些小技巧對你來說可能會很好。頁眉和頁腳是否需要垂直拉伸？ – 2011-03-03 23:09:45

其當然可行，但我總是喜歡離開佈局純CSS。下面我找到了一個很好的工作解決方案。 – 2011-03-07 05:35:46

這並非沒有瘋狂的黑客在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 
}

來源

2011-03-04 01:06:05 thirtydot

非常感謝，十三歲，爲此。在意識到我實際上並不需要左右分區後，我最終以非常類似於您的方式進行了操作。 – 2011-03-07 05:34:25

固定大小居中div被擴大divs包圍

回答

相關問題