需要CSS側邊欄高度才能隨內容展開

我有兩列布局，右側有灰色側邊欄。當左列的高度增加時（由於內容被動態擴展），我需要擴展邊欄的高度。我可以讓側邊欄適合靜態頁面，但是我無法使其與頁面的其餘部分一起增加大小。做了一些谷歌搜索，但找不到解決方法，爲我工作。需要CSS側邊欄高度才能隨內容展開

有誰知道如何做到這一點？

來源

2009-10-23 Justin

這是使用DIVS進行此類佈局時的常見問題。

如果你谷歌'虛列'你應該得到一些答案。

例如。 http://www.alistapart.com/articles/fauxcolumns/

來源

2009-10-23 00:05:33 Dal

這可能是稍微偏離，但如果您在網站上使用jQuery，您可以執行快速計算並調整所有div共用一個同級最大高度：

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

來源

2009-10-23 00:23:39

-1用於回答jQuery，而不是使用真正的JavaScript。 – John 2012-05-13 14:56:52

+22

針對jQuery的+1而不是「真實的」JavaScript – 2012-09-13 21:22:01

我猜你想將某些效果應用於您的佈局，以便它將需要兩列一起調整大小。如果你想動態改變列的高度值，我懷疑它只會用css，除非你實現一些JavaScript來控制樣式。

正如達爾建議，請查看人造色譜柱上的鏈接。顧名思義，解決方案對於修改柱高沒有太大的幫助。相反，它給出了「幻覺」，即當兩個列在實際上不是同一高度時，它們看起來具有相同的高度 - 並且與使用背景圖像的瓦片相同。

這個想法是不需要複雜的標記。簡單的結構與圖像的「幻覺」接觸是網頁設計中的常見做法。

問候，約拿

來源

2009-10-23 06:02:43 oonoo

我最近看到一個頗有創意的解決這個問題，使用CSS屬性position:absolute和border。

絕對值得一試，看看它是否適合你。

鏈接：http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

來源

2009-10-23 06:24:02

我已經被這個問題困擾了一段時間，我寫了一篇關於這個問題的文章：Done with faux columns。以下是我認爲：這個問題基於

JavaScript解決方案並不比任何其他解決方案更糟。事實上，如果您使用的是JavaScript，您可以節省幾小時試圖讓工作的挫敗感。人們會通過說「如果用戶關閉JavaScript會發生什麼情況，會對您發出警告」。相信我，如果用戶已關閉 JavaScript，那麼無論如何，大多數網絡都會打破。您的側邊欄不對他而言是。

正如cballou提到的，做這件事情最簡單的方法是使用jQuery代碼：

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

來源

2009-10-23 06:35:06 Niyaz

jQuery是真正的JavaScript，John。你的評論意味着我們應該站在侏儒的肩膀上，而不是巨人。 – 2012-11-02 00:42:58

我改變了background-color爲相同的顏色作爲我的側邊欄，即特定的頁面上，雖然我做的我的所有部分都有背景，而不是一個整體背景。但這可能不適用於所有人。

在我的樣式表，

.sidec 
{ 
background-color:#123456; 
}

在我的HTML頁面，

<body class="sidec"> 

content.... 

</body>

來源

2012-10-01 15:07:24 mikey

我不知道這是否會幫助，因爲我是個新手。然而，當我掙扎着讓我的邊欄顯示整個內容時，我做了兩倍的大小，我做了以下。直到我改變了課程，我才改變了我的身高和體重，沒有任何反應。我的班級列出了SB框架SB寬度。所以當我改變我的班級閱讀SB高度SB寬度，它適合我的內容，而不是原來的框架大小。我也嘗試過SB max sb width，但它取出了我的頁腳菜單欄（意味着它不再顯示它）。我回到SB高度SB的寬度，一切都很好。對於你們所有人來說，這都是非常基本的，但是爲了以防萬一有另外一個新手在閱讀這篇文章，對我的HTML代碼不甚瞭解......我希望這有助於=）節日快樂大家好！擁抱，tara

來源

2012-12-11 02:51:41 tara

這是我在StackOverflow上收到的第一個擁抱！ – arlomedia 2013-04-04 17:32:58

由於對新成員在這裏的態度很差，所以我希望這個答案能夠成爲一名軍官。我解決了這個問題，創建了一個960像素寬1像素高的背景圖像，並且使用了我需要的兩種顏色，分別對應各個寬度（780px和180px）的列。然後，我將此作爲我的容器在y軸上重複使用的背景圖像，並將內容和右側邊欄背景顏色設置爲透明。

.container { 
width: 960px; 
background-color: #FFFFFF; 
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg); 
background-repeat: repeat-y; 
} 

.sidebar1 { 
float: right; 
width: 180px; 
height:auto; 
background-color:transparent; 
padding-bottom: 10px; 
} 

.content { 
padding: 10px 0; 
width: 780px; 
background-color:transparent; 
float: right; 
}

我相信這種方法有其侷限性，但它在我的所有頁面上都能正常工作。

有可能我沒有很好的解釋過，如果是的話，請你好好說。我會努力擴展我的方法（這可能已經是常識）。

來源

2012-12-24 09:41:36

需要CSS側邊欄高度才能隨內容展開

回答

相關問題