Question

我在div中动态创建多个div。我希望所有这些内部div都避免从外部div溢出。我附加了jsfiddle来重现问题。

附加CSS：

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 100px;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  max-height: inherit;
  overflow-y: auto;
}

我希望所有div都在单个滚动下。我使用多个div，因为每个div代表一个新输入的关键字，div将在外部div中动态生成。我准备将div元素更改为其他HTML元素，如果问题是由于div元素。

Answer 1

这是你想要做的吗？

https://jsfiddle.net/t3jgdodm/2/

#topDiv {
    background-color: lightblue;
    max-height: 100px;
    width: 100%;
    padding: 10px;
   overflow-y: scroll;
}

我添加了overflow-y：滚动到你#topDiv element id

Answer 2

重要说明：您正在使用重复ID，这完全是禁忌。如果您计划重新使用它们，请将它们设为类，如下面的示例所示。

要在外部div上设置滚动条，请将#topDiv放在.insideDiv而不是#topDiv { background-color: lightblue; max-height: 100px; width: 100%; padding: 10px; overflow: auto; box-sizing: border-box; } .insideDiv { background-color: pink; }上。 https://jsfiddle.net/t3jgdodm/11/

box-sizing: border-box;

我已将#outerDiv添加到padding: 10px，以便width: 100% + max-height不会导致它从屏幕上流出。

此外，我已从.innerDiv移除Body以避免重叠{。}}。

Answer 3

只需从max-height: inherit中删除#insideDiv（它从父级继承max-height: 100px），然后将overflow-y: auto移至#topDiv。

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 100px;
  width: 90%;
  padding: 10px;
  overflow-y: auto;
}

#insideDiv {
  background-color: pink;
}

在你的确切小提琴中，滚动条被推离边缘。这只是因为#topDiv的宽度超过了100％（您需要添加box-sizing: content-box以防止这种情况发生）。

此外，可能只是在您的示例中，但请记住，您不应该有多个具有任何给定ID的元素。请改用class。

Answer 4

问题是您有多个div具有相同的id，首先使id成为class，其次是max-height: inherit insidediv，所有这些意味着他们从父级获得max-height，因此他们与max-height具有相同的topDiv，没有任何实际限制。我能想到解决这个问题的唯一真正方法是在外部div上放置一个overflow: auto，或者以某种方式确定insidediv的高度应该是什么。

因此，为了简化，HTML应该更像：

<div id="topDiv">
  <div class="insideDiv">
    Some inside content
    <br> More inside content
    <br> More inside content
    <br>
  </div>
  <div class="insideDiv">
    <br>check
    <br>check
  </div>
  <div class="insideDiv">
    <br>check
    <br>check
  </div>
</div>

和CSS应该更像：

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 100px;
  width: 100%;
  padding: 10px;
  overflow-y: auto;
}

.insideDiv {
  background-color: pink;
  overflow-y: auto;
}

或者从insideDiv类中完全删除overflow-y并将其保留在topDiv id上。

Answer 5

问题出在max height属性上。我把css改成了高度。

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  height: 100px;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  height: 33%;
  overflow: scroll;
}

Answer 6

我想为你的问题给出正确答案。

不要控制孩子（#innerDiv）的溢出，用父母（#topDiv）控制它。你不会告诉水去哪里，你会放入一个不同大小的玻璃杯。

以下是一个例子：

<div id="parent">
  <div>
      Some inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br>
  </div>
</div>


#parent {
  background-color: lightblue;
  max-height: 100px;
  overflow-y: scroll;
}

Answer 7

删除＆＃34; max-height：100px＆＃34;来自topDiv。它会起作用

内部Divs溢出Outerdiv

7 个答案: