身高百分百不適用於所有瀏覽器

Question

我創建了一個簡單的引導程序「input-group」示例，該示例在Chrome中運行良好，但在IE和Firefox中不起作用。

正如您在this示例中所看到的，「幫助」按鈕不會填充其父項的整個高度。在Chrome（版本58）中，它按預期工作。

Answer 1

請設置輸入組的高度。

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

然後它應該像預期的那樣工作。

對於這個問題here還有另一個很好的答案。

Answer 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>

Answer 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>