Question

下面是我的css＆amp; 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 min-height设置为100％

儿童占据父母的身高，因此父母的100％身高将给孩子100％的身高

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

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

Answer 2

我认为问题出在您的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 3

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

Answer 4

只需添加display: inline-block;即可解决问题（对我而言）

html div没有达到全高

4 个答案: