根據頁面的整個長度設置div高度（超出滾動範圍）

我試圖找到相關的解決方案，但我找到了一個。
首先，我想表明的example
我使用的CSS是：根據頁面的整個長度設置div高度（超出滾動範圍）

position:absolute; 
height:100%; 
width: 24.5%; 
top: 0; 
bottom: 0; 
right: 0; 
background-color: black;

我覺得有什麼不妥「底部= 0;」。
正如你所看到的，有2個div：main和sub。這兩個div彼此不同（如不嵌套）。
主要內容出現在'sub'div中。由於內容很多，頁面大小增加（我們需要滾動查看整個內容）。現在我想要的是，其他div的高度應根據整個頁面的長度增加。
在我的實際代碼中有更多的動態內容的div，所以頁面的長度不固定。
我想要的最終結果是黑色部分應該覆蓋頁面的整個右側，從頁面的頂部到底部。現在它只是在最初查看的頁面的第一部分結束，而不是滾動。
謝謝。

來源

2013-09-25 s.mujahid8

您好qs可能可能與此線程重合請退房..。 http://stackoverflow.com/questions/2920114/how-to-auto-adjust-the-div-height-according-to-content-in-it – codebreaker

在該線程中，div的高度根據當前內容進行調整在裏面。在我的情況下，div不包含任何內容。只是高度應該從頁面的頂部到底部以便創建一個黑色部分。兩個div彼此不相關。 –

嘗試的位置設置爲固定的，它會爲你工作...所以你的CSS看起來像......

position:fixed; 
height:100%; 
width: 24.5%; 
top: 0; 
bottom: 0; 
right: 0; 
background-color: black;

這裏是DEMO

來源

2013-09-25 05:31:41

謝謝。我想它的作用是始終在屏幕上固定div。這樣對嗎？其工作正常。:) –

設置位置：固定將修復您的元素相對於瀏覽器窗口的位置。它會把你的元素擺脫容器元素的影響。當您將高度設置爲100％並且位置固定時，您的元素將負責整個窗口。 –

你div與物業position: absolute;應該有一個父容器position: relative;

你可以在body設置position: relative;然後調整margin和padding得到div#main伸展的全高。

看看這個fiddle。

來源

2013-09-25 05:30:28 nicolekanderson

您需要將您的div放入另一個位置：relative。

.wrapper{ 
position:relative; 
}

http://jsfiddle.net/kQPA9/4/

元素與位置：相對於父容器與位置絕對放istselves：相對的。如果沒有它，它將自己定位到瀏覽器窗口。

來源

2013-09-25 05:30:49 Mag

聽起來像你想的股利是整個頁面的高度。這可以很容易地使用一些簡單的jQuery實現：

var bod = $(document); 
var body_height = bod.height(); 
var body_offset = bod.scrollTop(); 
var body_full_height = body_height + body_offset; 

$("#main").css("height", body_full_height + "px");

這會讓你的#main div的，它的父容器（文件）的高度。

其他解決方案的工作太多，但它不，但是，使

您可以查看下面的演示股利的頁面（超出滾動）的高度。

http://jsfiddle.net/BNAGf/

或者，像MAG指出的那樣，如果你可以添加一個新的div包裝器相對的，沒有必要對JS。

來源

2013-09-25 05:46:07

JQuery不屬於像這樣的簡單CSS解決方案。 – madr

請參閱答案的最後一句。另外，假設他不想要包裝，我就使用了給定的組件。但是馬德，你絕對正確。儘管這個特定的代碼會留下足夠小的空間，但添加jQuery會浪費系統資源。感謝您的見解。繼續編碼！ –

根據頁面的整個長度設置div高度（超出滾動範圍）

回答

相關問題