使子容器相对于父 div 固定（高度不固定）答案

【问题标题】：Make child container fixed relatively to parent div(with non-fixed height)使子容器相对于父 div 固定（高度不固定）
【发布时间】：2019-05-31 00:38:56
【问题描述】：

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

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

问题是，我的“maincontainer”高度不固定。当用户从视频切换到图像、返回和强制时，由于图像和视频有时大小不同，我的“按钮行”也会上下移动。让体验变得不一致。

我不允许更改 "maincontainer" 宽度、更改其属性或位置或在此布局中添加内容。 我只能更改“videocontainer”或“button-row”。

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

有什么解决方法吗？我可以通过jquery做到吗？以某种方式捕获 maincontainer 的初始高度。 And then, if user clicks Videos button, force maincontainer to have the same height that I captured on initial page load (when Image button is selected)

<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;
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这行得通吗（未经测试）

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

【讨论】：