Question

我正在使用引导程序模板，并将页面拆分为固定的侧边栏，页面的其余部分是一个大图。但是图片与侧边栏的高度不匹配。即使侧边栏的高度为100％，图片后面总会有一个白色的间隙。那么如何让我的照片占据100％的高度呢？

我的HTML：

<div class="container-fluid">
<div class="row content">
  <div class="col-sm-3 sidenav">
  <div class="sidebar affix">
  </div>
  </div>
  <div class="col-sm-9 pic">
    <div><img src ="homepage/pic5.jpg" class="img-responsive"></div>    
  </div>
</div>
</div>

我的Css：

.row.content {
    height: 684px;
}

.sidenav {
 height: 100%;
}

.pic .img-responsive {
    height: 100%;
}

.pic {
    padding: 0;
    position: relative;
}

.sidebar  {
    width: 22.5%;
    top: 0px;
}

.pic > div {
    position: absolute;
}

Answer 1

尝试像这样改变

.pic > .img-responsive {
    height: 100%;
}

Answer 2

您将img置于绝对位置的div，而img位置绝对位于div位置。

position: absolute

放置一个绝对的元素，意思是它自己。对于它周围任何元素的任何高度或宽度都不会影响元素，它是绝对的。

我没有对其进行测试，但您应该移除position:absolute，position:relative以及img周围的div。

我如何得到一张高度为100％的照片

2 个答案: