html div 没有占据全高

Question

您好，下面是我的 css 和 html，我正在尝试将网页中的两个 div 与全高（100%）对齐，但不起作用

.left_menu
 {
   height:100% !important;
   width:30%;
   border:1px solid grey;
   float:left;
 }

.right_menu
{
  height:100% !important;
  width:70%;
  border:1px solid grey;
  float:right;
}

这是我的 html

<div class="left_menu">
</div>
<div class="right_menu">
</div>

这段代码没有占据全高，请帮忙

Answer 1

将 html,body 最小高度设置为 100%

孩子占据了父母的高度，因此父母的 100% 高度将为孩子提供 100% 的高度

考虑到您的 div 是 html,body 的直接子级（如果不是，那么您需要保持与其父级的高度比）

html,body{
height:100%;
 min-height:100%; 
}