如何防止 .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>
最佳答案
当您使用百分比高度时,您需要在每个父容器上设置它。在这种情况下,fieldset
元素缺少它。
#resourcesDiv fieldset {
height: 100%;
}
* {
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>
关于css - 如何防止 div 溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40788130/