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>

这段代码没有占据整个高度，请帮忙检查

- user4246994

Answer 1

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

子元素占据父元素的高度，因此父元素的100%高度将给予子元素100%的高度

考虑到您的div是html和body的直接子元素（如果不是，则需要与其父元素保持高度比例）

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

- A.B

---

这个答案的问题在于如果body不是div的父元素。 - Rob

@AshokSri，你能详细说明一下问题或者提供一个fiddle吗？ - A.B

@AshokSri，为什么要让内容溢出，可以在右侧和左侧div中设置min-height而不是height，这样高度会自动增加。 - A.B

我想要一个像http://www.google.com/design/spec/material-design/introduction.html#introduction-goals这样的页面。 - user4246994

请将以下与编程相关的内容从英文翻译成中文。请单独提出问题，以便更多人看到并回答，这样您的时间也会被节省下来。在一段时间后，我将回去工作时再查看此事。 - A.B

Answer 2

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

- François Cright

---

天啊，你真是救了我的晚上！我已经快抓狂了。不过我也不知道为什么这个方法管用... - Null isTrue

Answer 3

你将 div 的高度设置为 100%，但是相对于什么 100%？它始终是父元素的 100%，但是 div 的父元素设置为什么了吗？我猜测你没有设置，因此浏览器无法计算出 100% 的值。

- Rob

---

当左侧或右侧的内容溢出时，滚动不起作用，请建议解决方案。 - user4246994

@AshokSri 您已经选择了最佳答案。也许这是另一个要发布的问题，或者如果它没有回答您的问题，则需要取消选择它。 - Rob

Answer 4

我认为问题出在你的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下面）。在这里，我只为left_menu指定了width。

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

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

- coder