html - float div 父级内联 block div 的 100% 高度

Question

我正在制作一个简单的幻灯片，我已经让 javascript 工作起来非常容易。然而，布局并不顺利。当前图像以大尺寸显示，固定宽度为 80%，高度可以改变以保持其纵横比。

这个问题是我希望当前图像以正确的宽高比(它是)显示，并且我希望右侧的缩略图栏在超出此高度时有一个滚动条。

这是 jsfiddle 上的演示:http://jsfiddle.net/ZTBNR/1/

代码如下:

CSS

div.slideshow{
 width: 100%;
 background: #B8B8B8;
 display: inline-block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border: 1px solid #000;
 overflow: hidden;
}
div.slideshow > div.current-slide_wrapper{
 padding: 10px;
 float: left;
 width: 80%;
 display: inline-block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 overflow: hidden;
 border-right: 1px solid #000;
}
    div.slideshow > div.current-slide_wrapper img{
     width: 100%;
     vertical-align: bottom;
     cursor: pointer;
    }
div.slideshow > div.other-slides_wrapper{
 padding: 10px 15px;
 float: right;
 width: 20%;
 height: 100%;
 display: block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 overflow-y: auto;
 overflow-x: hidden;
}
    div.slideshow > div.other-slides_wrapper img{
     border: 5px solid #FFF;
     width: 100%;
     cursor: pointer;
     margin-left: -5px;
    }
    div.slideshow > div.other-slides_wrapper img:hover{
     border: 5px solid #EAEAEA;
    }
    div.slideshow > div.other-slides_wrapper img.current{
     border: 5px solid #000;
    }

HTML

<h3>Screenshots</h3>
<div id="slideshow-1" class="slideshow_wrapper">
 <div class="slideshow">
  <div class="current-slide_wrapper">
   <img class="current-slide" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
  </div>
  <div class="other-slides_wrapper">
   <img class="other-slide current" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
   <img class="other-slide" data-slide="2" src="/path/to/image/website-screenshot2.jpg"/>
   <img class="other-slide" data-slide="3" src="/path/to/image/website-screenshot3.jpg"/>
   <img class="other-slide" data-slide="4" src="/path/to/image/website-screenshot4.jpg"/>
   <img class="other-slide" data-slide="5" src="/path/to/image/website-screenshot5.jpg"/>
  </div>
 </div>
</div>

Answer 1

我解决了!我将 div.slideshow 设置为 display: block; position: relative; 并且 div.current-slide_wrapper 不再 float 。

然后我将 div.other-slides_wrapper 设置为 position: absolute;顶部:0；右:0；高度:100%；。这非常有效!