Question

您好我有以下代码（JSFiddle）

    #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？

谢谢！

Answer 1

ENTRYFORM的位置：固定...这意味着它已从“流程”中移除。该文件。这会导致ENTRIES不影响ENTRYFORM。

为了让ENTRYFORM始终低于ENTRIES，我会在ENTRYFORM中增加40％的高度。

Answer 2

仍然不确定你的总体目标是什么，但如果你总是希望#entryform为300px并且#entries占用剩余空间，请试试这个：

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

Answer 3

尝试使用以下内容：

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

所以基本上你要说的是让另一个div占据其余的高度并从顶部60％开始最高点，这是最高的div高度。试试吧。这一直在测试

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

3 个答案: