拉伸DIV寬度以匹配另一個

Question

我有一個HTML佈局類似如下：

<div id="header"></div> 
<div id="body"></div> 
<div id="footer"></div> 

如果標題是一個固定的寬度，如何可以迫使它拉伸以匹配體的寬度 - 用於例身體比頭部寬的地方。

Answer 1

首先，將所有divs封裝在父代div中。這設置了一個邊界以防止某些divs超出其他範圍，並使得最小寬度的hack更容易使用。

<div id='container'> 
    <div id='header'></div> 
    <div id='body'></div> 
    <div id='footer'></div> 
</div> 

然後，在你的CSS，使用下面的最小寬度的黑客攻擊，使所有瀏覽器的最小寬度指令工作。評論中包含了它的工作細節。請注意，在引用IE時，我的意思是IE 6-7，我相信IE 8與所有其他瀏覽器一樣工作。

#header { 
    min-width:800px; /*minimum width for non-ie browsers, ignored by ie*/ 
    width: 100% !important; /*width will autoexpand as necassary in non-ie browsers*/ 
    width: 800px; /*ie uses width as a min-width by default.*/ 
    /*Also IE ignores !important and instead uses the last directive found*/ 
} 

現在，當body div擴展到大於標題的大小時，標題將擴展以匹配它。

Answer 2

我同意Ian Elliott，我懷疑你並不需要它。也許集中會做。

如果您確實需要允許標題匹配寬度和隨後內容的工具，那麼表格就是該工具。具有三個單元格行的表格將生成您想要的佈局，並且它曾經是佈局網站的標準方式。你想匹配一些舊的佈局？