为什么百分比高度将相邻的 div 缩小到相同的高度？答案

【问题标题】：Why height in percentage shrinks the adjacent divs to same heights?为什么百分比高度将相邻的 div 缩小到相同的高度？
【发布时间】：2016-09-04 11:47:15
【问题描述】：

我正在尝试制作不同高度的相邻div's，就像垂直条形图一样。问题是，当我以 px 指定 div 高度时，div's 高度是 ok，但是当我以不同百分比指定高度时，所有相邻的 div's 都会缩小到相同的高度。我为容器div 和条形div's 指定了最小高度，但它仍然不起作用。这是我的代码：

HTML

<div class="barcontainer">
<div id="firstbar" class="bar" style= "height:10%">
&nbsp;
</div>
<div id="secondbar" class="bar" style= "height:80%">
&nbsp;
</div>
<div id="thirdbar" class="bar" style= "height:50%">
&nbsp;
</div>
<div id="fourthbar" class="bar" style= "height:30%">
&nbsp;
</div>
</div>

CSS

barscontainer
{
  min-height: 300px;
}
.bar{
  background: none repeat scroll 0 0 #7EADCB;
  border-bottom: medium none;
  float: left;
  display: inline-block;
  margin: 1px;
  vertical-align: top;
  width: 16px;
  min-height: 1px
  z-index: 1;
}

请指导我做错了什么。谢谢。

【问题讨论】：

你可以为坏掉的箱子添加你的css吗？
我希望有更多知识的人可以确认或否认这一点，但我读到 CSS 长度是百分比，是宽度的百分比，即使是高度值。可能与此案无关，但它提醒了我......

标签： html css

【解决方案1】：

divs 会缩小，因为 barcontainer 的高度将只有几个像素，除非您 clear 浮动并为您的 barcontainer 设置高度 - 百分比现在将按预期工作。干杯！

.barcontainer{
   height: 300px;
  }
.barcontainer:after {
  content:'';
  display: block;
  clear: both;
}
.bar {
  background: none repeat scroll 0 0 #7EADCB;
  border-bottom: medium none;
  float: left;
  display: inline-block;
  margin: 1px;
  vertical-align: top;
  width: 16px;
  min-height: 1px;
  z-index: 1;
}

<div class="barcontainer">
  <div id="firstbar" class="bar" style="height:10%">
    &nbsp;
  </div>
  <div id="secondbar" class="bar" style="height:80%">
    &nbsp;
  </div>
  <div id="thirdbar" class="bar" style="height:50%">
    &nbsp;
  </div>
  <div id="fourthbar" class="bar" style="height:30%">
    &nbsp;
  </div>
</div>

更新：

@Martin 的评论让我思考。在 SO 本身的另一个 thread 中（感谢 @JohanKarlsson）我正在寻找为什么会发生您指定 min-height 并且当您给出百分比高度时孩子们不尊重他们：

高度 CSS property 说：

百分比

百分比是相对于高度计算的生成框的包含块。 如果包含的高度块没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，该值计算为自动。 根元素上的百分比高度是相对的到初始包含块。

所以看起来（尽管我仍然有一些疑问）这里父级的 height 属性没有明确指定，因此该值计算为 auto- min-height 覆盖 height 但 height 仍未明确指定。

【讨论】：

@TheNoble-Coder 查看更新答案-min-height 对您不起作用（您也必须指定 height），因为这就是 CSS 的工作原理...
@TheNoble-Coder 对此进行跟进...如果您觉得这有帮助，请接受/支持答案。谢谢！

【解决方案2】：

我可以看到一些事情：

类选择器不正确：应该是.barcontainer。
如果barcontainer 类上的min-height 属性设置为height 并具有长度值（如300px 或30em），则条的长度是正确的。我怀疑问题出在空内容上。
不间断的空格需要被包裹起来（p 标记就可以了）。
您可以使用内联样式，但我可能会使用 ID 选择器在 CSS 中应用它。

这是一个 link 显示这些更改。我注意到在 MacBook Pro Retina 上运行它时，由于像素密度，300px 并不是特别高。

根据您的需要，另一种方法可能是使用 SVG。我已经在这样的几件事上使用它们取得了很好的效果。有一些如何制作柱状图的例子here。

【讨论】：