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 =“layer1”的图像：

<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 =“layer1”和id =“layer2”的图层高度必须等于图像高度。

我这样看：

应该这样看：

这是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

这种情况正在发生，因为您已使用以下行

将图像的高度设为1000px

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

将其更改为100％并解决您的问题

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

Bootstrap 3 - 通用结构模板

1 个答案: