Height 100 percent not working in all browsers

Question

I created a simple Bootstrap "input-group" sample, which works fine in Chrome, but does not work in IE and Firefox.

As you can see in this sample, the "Help" button does not fill the full height of its parent. In Chrome (Version 58) it works as expected.

score 1 · Answer 1 · answered May 08 '17 at 14:38

Remove padding-top and 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>

score 0 · Accepted Answer · edited May 23 '17 at 12:18

0

Please set a height for input-group.

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

Then it should work like expected.

There is also another good answer for this problem here.

edited May 23 '17 at 12:18

Community

1
1

answered May 08 '17 at 14:31

Benjamin Schüller

2,104
1
17
29

The thread you linked states “ parent element(*) must have an explicit height. This is fairly self-evident,” If that is so, then why does behavior depend on the browser… there are situations where you want the height of the container to depend on some, but not all children and some other children depend on the height of the container… – Phylax Oct 20 '20 at 13:40

score 0 · Answer 3 · answered May 08 '17 at 14:40

The parent needs 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>

Height 100 percent not working in all browsers

3 Answers3