高度 100% 不适用于所有浏览器答案

【问题标题】：Height 100 percent not working in all browsers高度 100% 不适用于所有浏览器
【发布时间】：2017-10-06 14:39:50
【问题描述】：

我创建了一个简单的引导程序“input-group”示例，它在 Chrome 中运行良好，但在 IE 和 Firefox 中无法运行。

正如您在this 示例中所见，“帮助”按钮不会填满其父级的全部高度。在 Chrome（版本 58）中，它按预期工作。

【问题讨论】：

标签： html css twitter-bootstrap internet-explorer firefox

【解决方案1】：

请设置输入组的高度。

.input-group {
    width: 100%;
    height: 10px;
}

然后它应该像预期的那样工作。

这个问题还有另一个很好的答案here。

【讨论】：

您链接的线程声明“父元素（*）必须具有明确的高度。这是不言而喻的，“如果是这样，那为什么行为取决于浏览器……在某些情况下，您希望容器的高度取决于某些，但不是所有子项和其他一些子项都取决于高度容器的…

【解决方案2】：

删除padding-top 和padding-bottom

.input-group {
  width: 100%;
}

.input-group-btn {
  height: 100%;
}

.btn {
  height: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" />
    </div>
    <label class="form-control">Option 1</label>
  </div>
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" />
    </div>
    <label class="form-control">Option 2</label>
  </div>
  <div class="input-group-btn">
    <button class="btn">Help</button>
  </div>
</div>

【讨论】：

【解决方案3】：

家长需要height: 100%

.input-group {
    width: 100%;
}

.input-group-btn, .outer, .btn {
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group outer">
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" />
    </div>
    <label class ="form-control">Option 1</label>
  </div>
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" />
    </div>
    <label class ="form-control">Option 2</label>
  </div>
  <div class="input-group-btn">    
    <button class="btn">Help</button>
  </div>
</div>

【讨论】：