引導3 - 一般結構模板

Question

我有一個模板：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

<div class="col-md-3" style="background-color: gray; height: 100%;"></div> 
<div class="col-md-9" style="background-color: blue; height: 100%; padding: 0; overflow-y: auto;"> 
    <div id="layer1" class="col-md-5" style="background-color: red; height: 100%;"></div> 
    <div id="layer2" class="col-md-7" style="background-color: brown; height: 100%;"></div> 
</div> 

所有權利。

但是，如果我在使用id =「層1」層添加一個圖像：

<div class="col-md-9" style="background-color: blue; height: 100%; padding: 0; overflow-y: auto;"> 
    <div id="layer1" class="col-md-5" style="background-color: red; height: 100%;"> 
     <img src="Sin título.png" height="1000" /> 
    </div> 
    <div id="layer2" class="col-md-7" style="background-color: brown; height: 100%;"></div> 
</div> 

使用id =「層1」和id =「二層」層的高度必須等於該圖像高度。

我認爲是這樣的：

，應該看到它是這樣的：

這是CSS代碼：

html, 
body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

如果我隱藏圖像，並添加其他html元素經濟需求，問題是相同的：

<div class="col-md-5" style="background-color: red; height: 100%;"> 
    <!--<img src="Sin título.png" height="100%" />--> 
    <p>Litera1</p> 
    <p>Litera2</p> 
    <table border="1"> 
     <tr><td>aaaa</td></tr> 
     <tr><td>bbbb</td></tr> 
     <tr><td>cccc</td></tr> 
     <tr><td>dddd</td></tr> 
     <tr><td>eeee</td></tr> 
     <tr><td>ffff</td></tr> 
     <tr><td>gggg</td></tr> 
     <tr><td>hhhh</td></tr> 
    </table> 
    <p>Litera3</p> 
    <p>Litera4</p> 
    <h1>Litera5</h1> 
    <p>Litera6</p> 
    <p>Litera7</p> 
    <p>Litera8</p> 
    <table border="1"> 
     <tr><td>aaaa</td></tr> 
     <tr><td>bbbb</td></tr> 
     <tr><td>cccc</td></tr> 
     <tr><td>dddd</td></tr> 
     <tr><td>eeee</td></tr> 
     <tr><td>ffff</td></tr> 
     <tr><td>gggg</td></tr> 
     <tr><td>hhhh</td></tr> 
    </table> 
    <h1>Litera9</h1> 
    <p>Litera10</p> 
    <p>Litera11</p> 
    <p>Litera12</p> 
    <p>Litera13</p> 
    <p>Litera14</p> 
    <p>Litera15</p> 
    <p>Litera16</p> 
    <p>Litera17</p> 
    <p>Litera18</p> 
</div> 

如何能做到這一點？謝謝

Answer 1

這是發生，因爲你所做的圖像1000像素的高度與以下行

<img src="Sin título.png" height="1000" /> 

更改爲100％，你的問題應該解決

<img src="Sin título.png" height="100%" />