Javascript 内分区溢出外分区

我在一个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元素引起的，我准备将div元素更改为其他HTML元素。

重要注意：您使用的是重复ID，这是完全禁止的。如果您打算重用它们，请将它们设置为类，正如我在下面的示例中所做的那样

要在外部div上有一个滚动条，请将

溢出：auto

放在

#topDiv

上，而不是

.insideDiv

上

我添加了一个

框大小：边框框至
#outerDiv
，以便
填充：10px
+
宽度：100%
不会导致其流出屏幕

另外，我从
.innerDiv
中删除了
max height
，以避免它们重叠。
重要提示：您使用的是重复ID，这是完全禁止的。如果您打算重用它们，请将它们设置为类，正如我在下面的示例中所做的那样

要在外部div上有一个滚动条，请将
溢出：auto
放在
#topDiv
上，而不是
.insideDiv
上

我添加了一个
框大小：边框框至
#outerDiv
，以便
填充：10px
+
宽度：100%
不会导致其流出屏幕

另外，我已经从
.innerDiv
中删除了
max height
，以避免它们重叠。
只需从
\inneDiv
中删除
max height:inherit
（它从其父级继承了
max height:100px
），然后将
溢出-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%（您需要添加
框大小：内容框
，以防止出现这种情况）

另外，可能只是在您的示例中，但请记住，您不应该有多个具有任何给定ID的元素。请改用
类
。
只需从
\insideDiv
中删除
最大高度：inherit
（它从其父级继承
最大高度：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%（您需要添加
框大小：内容框
，以防止出现这种情况）

另外，可能只是在您的示例中，但请记住，您不应该有多个元素具有任何给定的ID。请使用
类
。
问题是您有多个
div
具有相同的
ID
，首先将该
ID
设为
类
，其次，您有
max height:inherit
在
insidediv
上，这意味着他们从父级获得
max height
，因此他们将拥有与
topDiv
相同的
max height
，没有真正的限制。我能想到的唯一解决这个问题的方法是在外部div上放置一个
溢出：auto
，或者以某种方式计算
内部div
的高度

因此，为了简化，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>

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上。
问题是您有多个
div
s具有相同的
id
，首先将该
id
a
class
设置为
，这意味着它们从父级获得了
max height
，因此它们将拥有与
topDiv
相同的
max height
，没有实际的限制。我能想到的唯一解决这个问题的方法是在外部div上放置一个
溢出：auto
，或者以某种方式计算
内部div
的高度

因此，为了简化，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>

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上。
问题在于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;
}

问题在于“最大高度”属性。我把css改成了高度

html,
body {
  height: 100%;
}

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

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

这就是你想做的吗


我添加了overflow-y:scroll to you#topDiv element id
这就是您要做的吗


我添加了overflow-y:scroll to you#topDiv元素id
从topDiv中删除“最大高度：100px”。它将工作
从topDiv中删除“最大高度：100px”。它会起作用的
我想为你的问题给出一个恰当的答案


不要用子对象（
#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;
}


一些内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容

更多内部内容


#母公司{
背景颜色：浅蓝色；
最大高度：100px；
溢出y：滚动；
}
我想为你的问题给出一个正确的答案


不要用子对象（
#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;
}


一些内部内容

更多内部内容

更多