如何防止 div 溢出？

Question

如何防止我的 .resourceliste div.overflow.

参见fiddle：https://jsfiddle.net/rdt9fr9m/2/

body,
html {
  height: 100%;
}
#smsTemplatesHelper {
  float: left;
  height: calc(100% - 10px);
  border: 1px solid green;
}
#resourcesDiv {
  border: 2px solid red;
  height: calc(100% - 280px);
}
.resourcesButtonDiv {
  bottom: 0;
  border: 2px solid yellow;
}
#resourcenliste {
  max-height: 100%;
  overflow: scroll;
}
#helpDiv {
  height: 280px;
  border: 1px solid blue;
}

<div id="smsTemplatesHelper">
  <div id="helpDiv"></div>
  <div id="resourcesDiv">
    <fieldset>
      <legend>Configure resources</legend>
      <div id="resourcenliste">
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
      </div>
    </fieldset>
    <div id="resourcesButtonDiv">btn1 btn2</div>
  </div>
</div>

Answer 1

当您使用百分比高度时，您需要在每个父容器上设置它。在这种情况下 fieldset 元素丢失了。

#resourcesDiv fieldset {
  height: 100%;
}

jsFiddle

* {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
}
#smsTemplatesHelper {
  float: left;
  height: calc(100% - 10px);
  border: 1px solid green;
}
#resourcesDiv {
  border: 1px solid red;
  height: calc(100% - 280px);
}
#resourcesDiv fieldset {
  height: 100%;
}
.resourcesButtonDiv {
  border: 1px solid yellow;
}
#resourcenliste {
  max-height: 100%;
  overflow: scroll;
}
#helpDiv {
  height: 280px;
  border: 1px solid blue;
}

<div id="smsTemplatesHelper">
  <div id="helpDiv"></div>
  <div id="resourcesDiv">
    <fieldset>
      <legend>Configure resources</legend>
      <div id="resourcenliste">
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
        <p>6666</p>
      </div>
    </fieldset>
    <div id="resourcesButtonDiv">btn1 btn2</div>
  </div>
</div>

Answer 2

#resourcenliste {
   max-height:100%;
   overflow:scroll // -- remove
}

卸载后添加容器溢出代码：

#resourcesDiv {
  border:2px solid red;
  height: calc(100% - 280px);
  overflow: scroll
}

如何防止 div 溢出？

How can I prevent overflow on a div?

css

overflow