如何避免一个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溢出另一个？

回答

相关问题