javascript - 强制图像 div 容器在自定义图像框布局内拉伸(stretch)

Question

我开发了自定义图像框 html 控件，其中包含图像区域以及位于主图像底部、顶部、左侧或右侧的小图像缩略图集合。问题是主图像 div 容器没有拉伸(stretch)以填充主框架 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(绿色背景)应该拉伸(stretch)以填充剩余区域。

我做错了什么？

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>