你如何覆蓋兩個div並使它們的高度相同？

我正在嘗試製作一個類似於twitter的內容div，旁邊有一個似乎被覆蓋的邊欄。我怎樣才能實現這一點使用CSS？你如何覆蓋兩個div並使它們的高度相同？

來源

2011-02-01 Yesterday

具體什麼問題？詢問如何複製Twitter佈局有點抽象;使用Firebug或Chrome的檢查來檢查它們的結構 - 我確定你會找到`z-index`和/或`position`屬性。 – jlmakes 2011-02-01 19:14:20

是的，有點像twitters主頁，側邊欄適合內容div的方式。感謝螢火蟲的消化，我會嘗試。 – Yesterday 2011-02-01 22:17:09

一種將其歸檔的技術稱爲虛擬列。看看... http://www.alistapart.com/articles/fauxcolumns/

也許否則，你可以用最小高度/最大高度工作

來源

2011-02-01 19:18:52 gearsdigital

創建側邊欄總是相同的高度內容區域基本上是創建一個最常用的方法'假'或虛假的側邊欄。這裏有一個例子：

<div id="wrapper"> 

    <div id="content"> 
      <p>My Content</p> 
    </div> 

    <div id="sidebar"> 
      <p>Sidebar</p> 
    </div> 

</div>

你的樣式會是這個樣子：

#wrapper { 
    background: url(faux_sidebar.jpg) top right repeat-y; 
} 

#sidebar { 
    float:right; 
    width:200px; 
}

圖像faux_sidebar.jpg將是相同的寬度側邊欄（也許對一些填充更寬一點）。這個想法是#wrapper的背景是一個圖像，它是側邊欄的背景。側邊欄然後像正常一樣漂浮在內容旁邊，並且由於#wrapper將展開以容納其兩個孩子中較高的一個，側欄總是與內容高度相同。

來源

2011-02-01 19:23:17 Mike

我更喜歡這樣的：

HTML：

<div class="surround"> 
    <div class="main"> 
     <br /><br /> 
     <br /><br /> 
     <br /><br /> 
     <br /><br /> 
     <br /><br /> 
     <br /><br /> 
    </div> 
    <div class="side"> 
     /* allways the same height like main */ 
    </div> 
</div>

CSS：

.surround 
{ 
    display: table; 
    width:900px; 
    min-height:200px; 
} 

.main{ 
    display:table-cell; 
    width:600px; 
    min-height:200px; 
    background-color:blue; 
} 
.side{ 
    display:table-cell; 
    width:300px; 
    min-height:200px; 
    background-color:red; 
}

來源

2011-02-01 20:13:54 Chugworth

你如何覆蓋兩個div並使它們的高度相同？

回答

相關問題