javascript - 使子容器相对于父 div 固定(高度不固定)

Question

默认情况下，当用户打开我的页面时，他只能看到带有图像的“imagecontainer”div，而“imagebutton”的状态为“已选择” ”。

当用户点击“视频”按钮时，我选择了“视频”按钮，隐藏“imagecontainer”并显示“videocontainer”。

问题是，我的“ma​​incontainer”高度不固定。当用户从视频切换到图像、后退和强制时，由于图像和视频有时大小不同，我的“button-row”也会上下移动。使体验不一致。

我不允许更改“ma​​incontainer”宽度、更改其属性或位置或向此布局添加内容。 我只能更改“videocontainer”或“button-row”。

我试图让我的“button-row”具有绝对位置并赋予它“bottom:0”以将其粘贴到父容器的底部。但是它没有用。

有什么解决方法吗？我可以通过 jquery 来做吗？以某种方式捕获 ma​​incontainer 的初始高度。然后，如果用户点击视频按钮，强制 ma​​incontainer 具有与我在初始页面加载时捕获的相同高度(当选择图像按钮时)

<div id=“maincontainer”>
    <div>Some data</div>
    <div id = "imagecontainer"> My image is here</div>
    <div id = "videocontainer"> My video is here</div>
    <div id = “button-row”>
        <button id=“imagebutton” class="selected" type="button">Image</button> 
        <button id=“videobutton” type="button">Video</button> 
    </div>
</div>

主容器的CSS:

#maincontainer{
    position: relative;
    width: 350px;
}

Answer 1

这行得通吗(未经测试)

$(document).ready(function() {
    if($("#imagecontainer").height() > $("#videocontainer").height()) {
        $("#videocontainer").height($("#imagecontainer").height());
    } else {
        $("#imagecontainer").height($("#videocontainer").height());
    }
});