height - 无法达到 100% 的工作高度（阅读此处的大多数帖子并尝试了 1 个多小时）

Question

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

我有一个包含两个浮动元素的包装容器。我遵循了所有可能解决 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;
}

两个浮动 div（侧边栏和内容）的高度：100%，我还添加了第三个 div 容器来清除浮动元素。

不过，当我将内容添加到内容 div 时，侧边栏不会自动“增长”。我觉得我尝试了一切，但它不会奏效。

在这一点上，任何想法/提示都受到高度赞赏！:)

提前谢谢了！

PS 我也使用 Twitter Bootstrap 以帮助解决我的问题

Answer 1

Here's a basic example which shows how to do what you're trying to do. You should be able to take this code and adapt it to your own code.

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;
}