css - 如何防止 div 溢出？

Question

如何防止 .resourceliste div 上的溢出。

参见 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>