我有这个代码
<div id="menu_right_levels">
<div class="level"> Livello 1 </div>
<div class="level"> Livello 2 </div>
<div class="level"> Livello 3 </div>
<div class="level"> Livello 4 </div>
<div class="level"> Livello 5 </div>
<div class="level"> Livello 6 </div>
<div class="level"> Livello 7 </div>
<div class="level"> Livello 8 </div>
<div class="level"> Livello 9 </div>
<div class="level"> Livello 10 </div>
</div>
还有这种风格
.level {
width: 100%;
height: 10%;
border: 1px solid black;
}
我需要一个自动填充他并具有相同高度的响应式 div,我不知道是什么,但是我的 10 个 div,高度:10% 看起来是这样的:
最佳答案
这是因为边框:每个 div 实际上都是 10% + 2px 高。您需要的是 CSS box-sizing
属性。使用 box-sizing: border-box;
CSS height
属性也应用于 padding 和 border。
JSFiddle:https://jsfiddle.net/q39vvzfv/
var boxSizing = "border-box";
var els = document.getElementsByClassName("level");
function toggleBoxSizing(e) {
if (boxSizing == "border-box") {
boxSizing = "content-box";
e.target.innerHTML = "Enable box-sizing";
} else {
boxSizing = "border-box";
e.target.innerHTML = "Disable box-sizing";
}
for (var i = 0; i < els.length; i++) {
els[i].style.boxSizing = boxSizing;
}
}
body {
margin: 0;
padding: 0;
}
#orange {
background-color: #FF4500;
height: 940px;
}
#menu_right_levels {
float: right;
height: 940px;
width: 380px;
background-color: #1E90FF;
}
.level {
width: 100%;
height: 10%;
border: 1px solid black;
text-align: center;
box-sizing: border-box;
}
<div id="menu_right_levels">
<div class="level"> Livello 1 </div>
<div class="level"> Livello 2 </div>
<div class="level"> Livello 3 </div>
<div class="level"> Livello 4 </div>
<div class="level"> Livello 5 </div>
<div class="level"> Livello 6 </div>
<div class="level"> Livello 7 </div>
<div class="level"> Livello 8 </div>
<div class="level"> Livello 9 </div>
<div class="level"> Livello 10 </div>
</div>
<div id="orange">
<button onclick="toggleBoxSizing(event)">Disable box-sizing</button>
</div>
关于html - 不要填充空间更多的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36958534/