height - 无法获得 100% 的高度来工作(阅读此处的大多数帖子并尝试了 1 个多小时)

Question

很抱歉打扰这样一个初学者的问题，但我根本无法让这个 100% 高度的东西起作用。这是情况(抱歉，在本地开发，所以没有链接):

我有一个包含两个 float 元素的包装容器。我遵循了可能 100% 解决问题的所有步骤，例如:

html, body {
  height: 100%;
  background: url(../img/bg.png);
  font-family: 'SansationRegular', Helvetica;
}

.wrap {
  width: 100%;
  height: 100%;
  height: auto !important; (apparently this fixes the issue in Chrome)
  margin:40px 0px 0px 0px;
  padding:0;
}

两个 float 的 div(边栏和内容)都有高度:100%，我还添加了第三个 div 容器来清除 float 元素。

不过，当我向内容 div 添加内容时，边栏不会自动“增长”。我觉得我尝试了一切，但都行不通。

此时非常感谢任何想法/提示! :)

非常感谢!

附言我也使用 Twitter Bootstrap 来帮助解决我的问题

Answer 1

下面是一个基本示例，展示了如何执行您想要执行的操作。您应该能够采用此代码并使其适应您自己的代码。

http://jsfiddle.net/QXZuy/1/

<div class="wrap">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>


html, body {
  height:100%;
}
.wrap {
  height:100%;
  width:100%;
  display:table;
  overflow:auto;
  background:#ccc;
}
.sidebar {
  display:table-cell;
  width:25%;
  background-color:blue;
}
.content {
  display:table-cell;
  width:75%;
  background-color:red;
}