獲取div以調整標題內容的高度

我有一個包含兩個div的邊欄。第一個div可能有也可能沒有內容，具體取決於頁面上做了什麼。第二個div包含一長串事物並且高度有限，所以可以滾動。我希望邊欄與頁面一樣高，我希望邊欄中的列表容器與邊欄一樣高，減去頁眉的高度（在使用頁面時會改變）。我不在乎限制標題的大小。最大的將會得到什麼並不重要。獲取div以調整標題內容的高度

現在我只是將列表容器的高度設置爲某個數字，即不會超過最大化的窗口高度，如果標題div儘可能多的內容，但是這會留下空的空間在標題爲空時的底部，並且如果窗口被調整大小，仍然不能很好地工作。

該佈局類似於this。

是否有一個CSS解決方案，我在找什麼，或者我將不得不使用JavaScript，並獲得窗口高度/設置div高度像素？我對任何一個都很好，似乎應該有一種CSS方式來完成它。

來源

2011-07-22 EvilAmarant7x

使用Firefox與Firebug擴展，你可以查看任何網站的CSS/HTML。只要看看你在Firebug中引用的頁面就可以得到答案。 –

我將該頁面作爲我的頁面正在執行的操作的演示，我不想要。列表容器高度正在設置，我希望它是頁面的高度。 – EvilAmarant7x

發現這是你想要的嗎？ http://jsfiddle.net/YWNyr/

CSS技巧：

如果你用「絕對」的定位，寬度，高度，左，上，等..相對於有其他的「位置」屬性的祖先比「靜態」還是身體如果什麼都沒有。
的靜態菜單，通常使用「的位置是：固定」，因爲這將簡化滾動問題
當使用jQuery它更容易，速度更快切換的一類，而不是改變DOM因爲這通過瀏覽器需要的元素的重新劃分

-edit：刷新側邊欄大小一些JavaScript是必要的：

$('#headerAdd , #headerRemove').click(function() 
    {$('#sideContainer').height($(window).height()-$("#header").height()); 
});

來源

2011-07-22 15:54:51 mrBorna

這幾乎就是我想要的。唯一缺少的是我希望列表容器關心標題的內容高度。即sidecontainer應該是頁面高度的100％，並且標題高度應該與它需要的一樣大，並且列表應該是標題未使用的剩餘部分。以下是導致問題的[示例]（http://jsfiddle.net/YWNyr/3/）。 – EvilAmarant7x

對不起，你是ganna必須使用JavaScript（對於dom更改後的刷新），在頁面呈現後，css變爲靜態。（）＃$（'＃headerAdd，#headerRemove'）。click（ function（）{$（'＃sideContainer'）。height （$（window）.height（） - $（「＃header」）。height（））;} ）;' – mrBorna

這就是我所猜測的，但我甚至不擅長CSS，所以我不是打折的可能性。謝謝！ – EvilAmarant7x

試試你的列表容器的高度設置爲100％，你的溢出滾動：

#listContainer { 
    height: 100%; 
    overflow: scroll; 
}

這將使列表中到達的頁面，底部的滾動窗格不管是大標題增長或縮小。

來源

2011-07-22 14:39:57 Kyle

我剛剛在我的小提琴頁面上改變了這一點，但它沒有這樣做。它只是把listContainer放在一個大小適合滾動條的div中，它不會做任何事情。 http://jsfiddle.net/v6MNx/6/ – EvilAmarant7x

這可能是因爲預覽窗格調整大小以適應內容的長度（因此不需要滾動）。試着用一個固定的高度來包裝所有的div來模仿你的html頁面。 – Kyle

如果你不反對使用一個小jQuery，這裏有一個小代碼片段，應該可以幫助你平衡兩個div的高度，不管哪個div有更多的內容。你也可以根據自己的喜好改變它。

var leftHeight = $(".left").height(); 
var rightHeight = $(".right").height(); 
var maxHeight = 0; 
var div = ""; 
if (leftHeight >= rightHeight) 
{ 
    maxHeight = leftHeight; 
    div = ".right"; 
} 
else 
{ 
    maxHeight = rightHeight; 
    div = ".left"; 
} 

$(div).each(function(){ 
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
}); 

$(div).height(maxHeight);

和信貸，信貸是因爲，這是一個代碼編輯剪斷在css-tricks.com

來源

2011-07-22 14:59:33

獲取div以調整標題內容的高度

回答

相關問題