如何让两个div彼此相邻具有相同的高度？ [英] How to make two div´s next to each other have the same height?
问题描述
一个用于左边那个标题下的
菜单，旁边是内容将被加载的标题。
所以我不想设置静态宽度，并且内容的
长度发生变化。我已经尝试过使用 overflow：auto
但是没有奏效。
CSS ：
body {
保证金：0;
padding：0;
身高：100％;
}
.area-header {
height：40px;
背景颜色：＃71A4C3;
margin-bottom：20px;
margin-left：20px;
margin-right：20px;
}
.area-menu {
width：300px;
margin-left：20px;
背景颜色：＃8BC6EA;
display：inline-block;
margin-bottom：auto;
padding-bottom：100％;
身高：100％;
}
.area-content {
display：inline-block;
位置：绝对;
margin-right：20px;
margin-left：20px;
HTML：
< body>
< div id =area-headerclass =area-header>
< h2>一个Web应用程序！< / h2>
< / div>
< div id =area-menuclass =area-menu>
< ul id =menu>
@foreach（Model中的WebApplicationWithSqlAndJS.Models.MenuItem项目）
{
< li id =menu-item>< a href =@ item.Targetonclick = return false> @ item.Title< / a>< / li>
}
< / ul>
< / div>
< div id =area-contentclass =area-content>< / div>
< / body>
您只需将父div添加到div您必须拥有相同的身高。
父级div ：
overflow：hidden;
float：left;填充底部：500em; margin-bottom：-500em;
你可以得到通过应用
a的底部填充大量的相等高度栏，CSS中的相同高度栏，相同数量的底部负边界和具有隐藏溢出的div的列周围的
。
垂直居中文本有点麻烦，但是这应该是
帮助你的。
https://stackoverflow.com/a/1205485/2851845
body {margin：0;}。area-header {height：40px;背景色：＃71A4C3; margin-bottom：20px;保证金左：20像素; margin-right：20px;}＃area-wrapper {overflow：hidden; width：100％;} .area-menu，.area-content {float：left;填充底部：500em; margin-bottom：-500em;}。area-menu {width：200px; background-color：＃8BC6EA;}。area-content {width：400px; background-color：LightSlateGrey; }
< body> < div id =area-headerclass =area-header> < h2>一个Web应用程序！< / h2> < / DIV> < div id =area-wrapper> < div id =area-menuclass =area-menu> < ul id =menu> < liite =menu-item>< a href =＃onclick =return false> @ item.Title< / a>< / li> < / UL> < / DIV> < div id =area-contentclass =area-content> < div style =height：200px; background：red;>< / div> < / DIV> < / body>
So I wrote a Web Application which has three div´s. One for the headline under that one on the left with a menu and next to that one in which the content will be loaded.
So I don´t want to set a static width and the content´s
length changes. I have tried with overflow:auto
but that did not work.
CSS:
body {
margin: 0;
padding:0;
height:100%;
}
.area-header {
height:40px;
background-color:#71A4C3;
margin-bottom: 20px;
margin-left:20px;
margin-right:20px;
}
.area-menu {
width:300px;
margin-left:20px;
background-color:#8BC6EA;
display:inline-block;
margin-bottom:auto;
padding-bottom:100%;
height:100%;
}
.area-content {
display:inline-block;
position:absolute;
margin-right:20px;
margin-left:20px;
}
HTML:
<body>
<div id="area-header" class="area-header">
<h2>A Web Application!</h2>
</div>
<div id="area-menu" class="area-menu">
<ul id="menu">
@foreach (WebApplicationWithSqlAndJS.Models.MenuItem item in Model)
{
<li id="menu-item"><a href="@item.Target" onclick="return false">@item.Title</a></li>
}
</ul>
</div>
<div id="area-content" class="area-content"></div>
</body>
You just need to add a parent div to the divs that you want to have same height.
parent div:
overflow: hidden;
child div:
float: left; padding-bottom: 500em; margin-bottom: -500em;
You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.
body
{
margin: 0;
}
.area-header
{
height:40px;
background-color:#71A4C3;
margin-bottom: 20px;
margin-left:20px;
margin-right:20px;
}
#area-wrapper
{
overflow: hidden;
width: 100%;
}
.area-menu, .area-content
{
float:left;
padding-bottom: 500em;
margin-bottom: -500em;
}
.area-menu
{
width: 200px;
background-color:#8BC6EA;
}
.area-content
{
width: 400px;
background-color: LightSlateGrey;
}
<body>
<div id="area-header" class="area-header">
<h2>A Web Application!</h2>
</div>
<div id="area-wrapper">
<div id="area-menu" class="area-menu">
<ul id="menu">
<li id="menu-item"><a href="#" onclick="return false">@item.Title</a></li>
</ul>
</div>
<div id="area-content" class="area-content">
<div style="height:200px;background:red;"></div>
</div>
</div>
</body>
这篇关于如何让两个div彼此相邻具有相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
