强制图像 div 容器在自定义图像框布局内拉伸

Question

我开发了自定义图像框 html 控件，其中包含图像区域以及位于主图像底部、顶部、左侧或右侧的小图像缩略图集合。 问题是主图像 div 容器没有拉伸以填充主框架 div 中的剩余区域。

这是我的代码

.wvIBoxFrameDiv {
    width: 300px;
    height: 300px;
    background: red;
 }

.wvIBoxMainImageDiv {
    background: green;
}

.wvIBoxThumbContainerDiv{
    background: black;
    overflow: hidden; 
    white-space: nowrap;
}

.wvIBoxThumbImagesContainerDiv{
    background: blue; 
    display: inline-block; 
}

.wvIBoxThumbNavigationDiv{
    background: purple;
    display: inline-block;
    height: 30px;
    width: 30px;
}

.wvIBoxThumbImageDiv{
    background: orange;  
    display: inline-block;
    height: 40px;
    width: 40px;
}

<div class="wvIBoxFrameDiv">
    <div class="wvIBoxMainImageDiv">
    </div>
    <div class="wvIBoxThumbContainerDiv">
        <div class="wvIBoxThumbNavigationDiv"></div>
        <div class="wvIBoxThumbImagesContainerDiv">
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
        </div>
        <div class="wvIBoxThumbNavigationDiv"></div>
    </div>
</div>

这里我需要将缩略图 div 容器（黑色背景）放置在主（红色）框架 div 的底部，而主图像 div（绿色背景）应该拉伸以填充剩余区域。

我做错了什么？

Answer 1

将height 和width 作为100% 给.wvIBoxMainImageDiv

.wvIBoxFrameDiv {
    width: 300px;
    height: 300px;
    background: red;
 }

.wvIBoxMainImageDiv {
    background: green;
    height:100%; /*this here*/
    width:100%; /*and here*/
}

.wvIBoxThumbContainerDiv{
    background: black;
    overflow: hidden; 
    white-space: nowrap;
}

.wvIBoxThumbImagesContainerDiv{
    background: blue; 
    display: inline-block; 
}

.wvIBoxThumbNavigationDiv{
    background: purple;
    display: inline-block;
    height: 30px;
    width: 30px;
}

.wvIBoxThumbImageDiv{
    background: orange;  
    display: inline-block;
    height: 40px;
    width: 40px;
}

<div class="wvIBoxFrameDiv">
    <div class="wvIBoxMainImageDiv">
    </div>
    <div class="wvIBoxThumbContainerDiv">
        <div class="wvIBoxThumbNavigationDiv"></div>
        <div class="wvIBoxThumbImagesContainerDiv">
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
        </div>
        <div class="wvIBoxThumbNavigationDiv"></div>
    </div>
</div>

Answer 2

你也可以使用 flex，（使用自动前缀）：

<div class="fullGallery">
  <div class="mainImage">
  </div>
  <div class="bottomImages">
    <div class="navigationButton">
    </div>
    <div class="imageContainer">
      <div class="oneImage"></div>
      <div class="oneImage"></div>
      <div class="oneImage"></div>
    </div>
    <div class="navigationButton">
    </div>
  </div>
</div>


.fullGallery {
  width: 300px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-direction: column;
}
.mainImage {
  width: 100%;
  flex: 1;
  background-color: yellow;
}
.bottomImages {
  width: 100%;
  height: 70px;
  background-color: green;
  display: flex;
}
.navigationButton {
  width: 40px;
  height: 100%;
  background-color: pink;
}
.imageContainer {
  flex: 1;
  display: flex;
  justify-content: space-around;
}

.oneImage {
  background-color: blue;
  width: 26%;
}

http://codepen.io/anon/pen/JYrdQJ

我更喜欢它