如何避免一個DIV溢出另一個？

你好，我有以下代碼（JSFiddle）如何避免一個DIV溢出另一個？

#statements { 
    position: relative; 
    top: 0; 
    bottom: 0; 
    height: 100vh; 
    background-color: rgba(200, 200, 200, 0.4); 
    max-width: 340px; 
    padding-left: 50px; 
    z-index: 1; 
} 

#entries { 
    position: relative; 
    height: 60%; 
    max-width: inherit; 
    overflow: scroll; 
} 

#entryform { 
    position: fixed; 
    height: 300px; 
    bottom: 0; 
    background-color: rgba(200, 200, 200, 0.8); 
    width: 340px; 
}

和

<div id="statements"> 
    <div id="entries">entry</div> 
    <div id="entryform">entryform</div> 
</div>

我的問題是，我不能讓entries停止前entryform開始（也應該響應瀏覽器的高度）。

任何想法，我怎麼能讓entries不會溢出entryform DIV？

謝謝！

來源

2015-04-23 Dmitry Paranyushkin

上測試'＃entryform'是固定的。如果你希望'＃entries'在一個固定元素之前停止，你需要進行一些js計算。 –

如果是絕對的？ @KaiQing –

絕對會給你類似的效果，除了底部：0將是相對於父母，而不是視圖，因爲你已經聲明100vh＃語句 - 不是100％確定爲什麼你會這樣做。我想我們需要知道你的最終目標，以瞭解你應該如何重組這個 –

ENTRYFORM的position：fixed ...這意味着它從文檔的'流'中被刪除。這會導致ENTRIES不影響ENTRYFORM。

要獲得ENTRYFORM始終低於條目，我想補充的高度：40％ENTRYFORM。

來源

2015-04-23 00:56:40

仍然不知道你在這裏的總體目標是，但如果你總是希望#entryform是300像素和#entries佔用的剩餘空間試試這個：

#entries { 
    position: absolute; 
    top:0; 
    bottom:300px; 
    width:100%; 
}

來源

2015-04-23 01:01:15 partypete25

嘗試用下面的：

#entryform { 
    position: fixed; 
    height: 40%; 
    top: 60%; 
    bottom: 0; 
    background-color: rgba(200, 200, 200, 0.8); 
    width: 340px; 
}

所以基本上你是說讓其他div取其餘的高度，並從最高的div高度的60％開始。嘗試一下。這已經在

來源

2015-04-24 15:05:42

如何避免一個DIV溢出另一個？

回答

相關問題