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

Question

我在将3个div对齐到网页中时遇到一些问题。基本上，我在一个“主要” div中彼此并排有3个div。我想在所有三个子div上设置一个最小高度，但要使其扩展以匹配最大的3个子div的高度。下面的原始图片显示了该问题。

编辑-为了澄清，我试图使“蓝色”和“红色”部分（sideMenu，rightMenu和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>

CSS如下-

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

Answer 1

您应该为孩子的%标签使用px而不是div单位。
这意味着如果添加width: 50%;，其宽度将为其父元素宽度的一半。
因此，如果您要创建类似图片的图片，则应将width: 30%;分配给侧面元素，将width: 40%;赋予较大的（中间）元素。

应该可以。另外，删除添加到子元素中的每个min-width和max-width属性。

Answer 2

您也可以使用flexbox实现它。 我只关注布局，而忽略了一些标记：

   
.container {
	display:flex;
	flex-direction:column;
	height:200px;
}
.container a{
	color:#fff;
}
.mainDiv {
	display:flex;
	flex-grow:1;
	justify-content:space-between;
}

.contentDiv {
	flex-grow:1;
	background:#f00;
}

.sideMenu {
	display:flex;
	flex-direction:column;
	flex-basis:15%;
	align-itens:start;
	background-color: #00f;
	
}

.footerBanner {
	background-color: #000; 
	height:20%;
}

<div class="container">
	<div class="mainDiv">
		<div class="sideMenu">
			<a href="#">1</a>
		</div>
		<div class="contentDiv"> 
		</div>
		<div class="sideMenu">
			<a href="#">2</img></a>
		</div>
	</div>
	<div class="footerBanner">
		<a href="#">3</a>
	</div>
</div>	

This是用于快速创建flexbox布局的帮助工具。