html div没有达到全高

Question

嗨，下面是我的CSS和HTML，我试图在一个全高（100％）的网页中对齐两个div但是不工作

.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，身体最小高度为100％

孩子占据父母的身高，所以100％的父母身高会给孩子100％的身高

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

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

Answer 2

你将div的高度设置为100％但是100％是什么？它总是100％的父元素，但div的父元素是什么？我的赌注是你没有设置任何东西，浏览器无法计算什么是100％的东西。

Answer 3

我认为这个问题出在你的border属性中，因为它们增加了额外的空间。所以，我不确定这是否最符合您的需求，但我会做这样的事情：

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

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

编辑：这可能是更好的解决方案，因为前一个将对不同宽度的设备工作（对于小型设备right_menu在left_menu下）。在这里，我只是为width指定left_menu。

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

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

Answer 4

只需添加display: inline-block;它应该解决问题（对我来说）