所以我不想设置静态宽度，并且内容的长度发生变化。我已经尝试过使用 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的列周围的。 垂直居中文本有点麻烦，但是这应该是帮助你的。
stackoverflow/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.
stackoverflow/a/1205485/2851845
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彼此相邻具有相同的高度？
发布评论