Html CSS显示问题-对齐的Divs高度

我有一些问题，让3个div在一个网页上对齐。基本上，我在一个“main”div中有3个div彼此并排。我想在所有3个子div上设置一个最小高度，但让它们扩展以匹配3个子div中最大的一个子div的高度。下图显示了这个问题

编辑-为了澄清，我正在尝试让“蓝色”和“红色”部分（侧菜单、右菜单和contentDiv）自动展开以到达页脚。现在，中央div展开，在左右“蓝色”部分下方留下空白

我的html看起来像这样-

<div class="mainDiv">
        <div class="sideMenu">
            <div class="vertical-menu">
                <a id="uxLink_1" runat="server" href="1.aspx">1</a>
            </div>
        </div>
        <div class="rightMenu" id="uxRightMenu">
            <a href="" id="uxRightLink" runat="server"><img alt="" src="" border="0" id="uxRightImage" runat="server"></img></a>
        </div>
        <div class="contentDiv"> 
            <asp:ContentPlaceHolder ID="uxContentPH" runat="server">

            </asp:ContentPlaceHolder>
        </div>
    </div>
    <div class="footerBanner" id="uxFootBanner">
        <center>
        <a href="" id="uxFooterLink" runat="server"><img alt="" src="" border="0" id="uxFooterImage" runat="server" class="footerBannerImage"></img></a>
        </center>
    </div>

---

您应该为您的孩子使用

%

而不是

px

单位

div

标签。
这意味着如果您添加

宽度：50%其宽度将是其父元素宽度的一半。

因此，如果你想创建类似于该图片的内容，你应该给出
width:30%到您的侧面元素和
宽度：40%给你更大的（中间）元素

这应该行得通。另外，删除添加到子元素的每个
minwidth
和
maxwidth
属性。
您也可以使用
flexbox
实现它。
我只关注了布局，并介绍了您的一些标记：



.集装箱{
显示器：flex；
弯曲方向：立柱；
高度：200px；
}
.货柜a{
颜色：#fff；
}
梅因迪夫先生{
显示器：flex；
柔性生长：1；
证明内容：之间的空间；
}
.contentDiv{
柔性生长：1；
背景：#f00；
}
.副菜单{
显示器：flex；
弯曲方向：立柱；
弹性基准：15%；
对齐ITEN：开始；
背景色：#00f；
}
.页脚横幅{
背景色：#000；
身高：20%；
}

是否希望红色div填充白色区域？否，我正在尝试根据红色部分的大小将蓝色部分展开到底部。目前，中间的div比侧面的div大，使得空白区域可见。我刚刚尝试过这个，但它并没有达到我所需要的效果。当中央容器（contentDiv）的内容到达页脚时，它继续位于页脚后面，然后位于页脚下面的空白处。div没有扩展以适应文本。可能添加
溢出：auto
会有帮助吗？有人将此标记为重复问题，我在那里找到了我的答案。无论如何，谢谢你抽出时间。
.mainDiv {
width: 98%;
min-width: 440px;
border: solid 5px black; 
margin-top: -4px; 
border-top: none;
overflow: auto;}

.contentDiv {
min-height: 700px;
height: auto;
font-size: 9.5pt;}

.sideMenu {
height: 100%;
min-height: 700px; 
width: 150px; 
float:left; 
background-color: black;
border-right: solid 5px black;}

.rightMenu {
height: 100%;
min-height: 700px; 
width: 115px; 
float: right; 
background-color: black;
border-right: solid 5px black;
padding-left: 5px;}

.footerBanner {
display: none;
width: 98%; 
float:none; 
background-color: black; 
border: solid 5px black;
border-top: none;
min-width: 440px;  
padding-top: 3px;}

.footerBannerImage {
width: 98%;
height: auto;
min-width: 440px;
max-width: 728px;
max-height: 90px;
min-height: 54px;}

.vertical-menu {
width: 150px;}

.vertical-menu a {
background-color: black;
color: white;
display: block;
padding: 12px; 
text-decoration: none;}

.vertical-menu a:hover {
background-color: #37353d; }

.vertical-menu a.active {
background-color: #438210;
color: white;}