如何調整100％的高度，以包括添加元素的高度

我有一個動態使用JS添加的div，它包含一個疊加層和一個包含的元素，它應該根據需要隨頁面一起滾動（我不想滾動到發生在該div內，調整大小以適應內容）。覆蓋層設置爲寬度= 100％和高度= 100％以覆蓋整個頁面。但是，當包含的div最終比視口高時，這將導致覆蓋在視口高度後停止。如何調整100％的高度，以包括添加元素的高度

這種解釋那種很爛所以可能更容易明白我的意思，所以這裏有一個簡單的小提琴： http://jsfiddle.net/72SU5/

下面是我使用的CSS：

#overlay { 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.5); 
    position: absolute; 
    top: 0; 
    z-index: 20; 
} 

#overlay > div { 
    width: 100px; 
    border: 1px solid #ccc; 
    padding: 20px; 
    padding-bottom: 40px; 
    background: #eee; 
    margin: 50px auto; 
}

我的問題是我怎麼一旦顯示隱藏內容，可能會將覆蓋範圍擴展至高度的100％。我很好，使用JS/jQuery來實現這一點。或者，如果有一個更好的純CSS方法需要重構，我也可以這麼做。唯一的要求是，如果內容導致它延伸到視口之外，則覆蓋內容會隨頁面一起滾動。

來源

2014-05-02 dekaliber

以下屬性添加到您的#overlay CSS類：

overflow:auto;

Fiddle

來源

2014-05-02 00:57:12 potashin

哇哦......沒想到它是如此簡單。謝謝你的提示！ – dekaliber

你也可以從#overlay類中刪除height屬性。

http://jsfiddle.net/72SU5/6/

來源

2014-05-02 01:29:20 brandonma

不幸的是，如果你這樣做，覆蓋層內容小於視口高度的情況下，覆蓋層不會伸展到視口的底部。 – dekaliber

#overlay { 
width: 100%; 
height: auto; 
background-color: rgba(0,0,0,0.5); 
position: absolute; 
top: 0; 
z-index: 20; 
} 

#overlay > div { 
width: 100px; 
border: 1px solid #ccc; 
padding: 20px; 
padding-bottom: 40px; 
background: #eee; 
margin: 50px auto; 
}

來源

2014-05-02 02:41:46

如何調整100％的高度，以包括添加元素的高度

回答

相關問題