如何让两个div彼此相邻具有相同的高度？

所以我写了一个有三个div的Web应用程序。一个用于左侧下方的标题，菜单旁边的内容将被加载。如何让两个div彼此相邻具有相同的高度？

所以我不想设置一个静态宽度和内容的长度变化。我已经尝试overflow:auto 但这并不奏效。

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>

来源

2015-03-13 Joh

当你说 '长度'，你的意思是高度？ – 2015-03-13 12:54:56

对不起，更正了！ – Joh 2015-03-13 12:56:06

可能重复[如何在纯CSS中创建等高列]（http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css） – Turnip 2015-03-13 12:56:21

你只需要添加一个父div到你想拥有相同高度的div。

父DIV：

overflow: hidden;

孩子的div：

float: left; padding-bottom: 500em; margin-bottom: -500em;

你可以得到同等高度列在CSS中，通过应用底部填充的大量底部负边距和相同数量的底部填充，并使用隐藏溢出的div围绕列。垂直居中文本有点棘手，但这应该帮助你。

https://stackoverflow.com/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>

来源

2015-03-13 13:25:35

感谢这正是我一直在寻找的！ – Joh 2015-03-13 14:02:21

您可以设置 “区域的内容” 分区相同的 “区域内容” DIV高度：

 <script> 
     $(document).ready(function(){ 
       heightToSet=$("#area-menu").height(); 
       $("#area-content").height(heightToSet); 
     }); 
     </script>

来源

2015-03-13 13:18:55

如果处理动态内容或图像，如果我们使用window.load而不是document.ready，那将是一个更好的主意。在某些情况下，使用document.ready，将返回0作为元素的高度，这将使其他元素不可见。 – 2015-03-13 13:24:05

这两个建议有一些原因没有影响菜单或内容的长度 – Joh 2015-03-13 13:28:17

也删除填充底部：100％;高度：100％;从。区域菜单类 – 2015-03-13 13:37:41

如何让两个div彼此相邻具有相同的高度？

回答

相关问题