如何讓兩個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彼此相鄰具有相同的高度？

回答

相關問題