html - 不要填充空间更多的div

Question

我有这个代码

<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% 看起来是这样的:

Answer 1

这是因为边框:每个 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>