如何讓側邊欄自動伸展

我有，我估計，是一個簡單的問題。我在頁面上有一個側邊欄，它有自己獨特的顏色，我希望它根據主要內容區域中的文本進行增長和縮小，以便從導航欄延伸到頁腳。我試圖設置一個高度，但這只是迫使整個內容區域底部有大量的空白區域。我希望側欄的高度由主區域中的內容量決定。如何讓側邊欄自動伸展

這裏是側邊欄的CSS（如果我需要發佈更多的代碼，請讓我知道）：

.LeftSidebar 
{ 
float: left; 
background-color: #1b619c; 
color: White; 
width: 175px; 
text-align: center; 
padding: 20px; 
clear:both; 
}

我仍然努力學習，因此任何幫助，將不勝感激。提前致謝！

來源

2012-04-09 Peter

寬度應在％，否則它可能導致變化不同分辨率/瀏覽器。請張貼一些示例HTML。 – Pankaj 2012-04-09 14:36:06

嘗試刪除寬度並檢查 – Ravia 2012-04-09 14:35:10

你所尋找的是一個CSS列做updateView()。有幾個選項可以用css包裝器來設置三列布局或兩列布局。我會向您推薦以下網站：

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

或者，如果你正在使用CSS3標記，那麼你也可以使用顯示：表並顯示：表細胞標記來設置列。請參閱本網站

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

div#ContentWrapper { display: table; } 
div#LeftSidebar { display: table-cell; } 
div#MainContent { display: table-cell; }

我顯示的ID，因爲你應該使用一個類的唯一時間是當有在同一頁上爲該類多個引用。

然而，它會比修改側邊欄列的CSS更復雜一點。

來源

2012-04-09 14:35:19 CBRRacer

你可以設置height:100%或調整高度取決於顯示器（屏顯示器）大小的直通jQuery的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
function updateView() 
    { 
     var obj = $(".LeftSidebar"); 
     var sc_size = $(window).height() 

     var obj_height = sc_size - 90 //90 is example of footer os smthg else height 

     $(".LeftSidebar").css({'height': obj_height}); 
    } 
</script>

上<body onload="updateView()">

來源

2012-04-09 14:34:50

如果您有一個DIV元素作爲您的側邊欄，具有固定寬度，它將自動垂直拉伸，具體取決於您的內容大小。

，讓我把錢用在我的嘴是：http://jsfiddle.net/alexpeta/NkHY5/

來源

2012-04-09 14:43:14

我的整個側邊欄都被包裹在一個div中，但它只能向下延伸至側欄中的文本，而不是主要內容的範圍。 – Peter 2012-04-09 14:45:30

然後據我所知，在你的情況下，你需要用jquery計算你的高度：$（window）.height（） – 2012-04-09 14:47:51

如何讓側邊欄自動伸展

回答

相關問題