无法获得100％的身高（请阅读大多数帖子并尝试1个小时以上）

对不起，打扰这样一个初学者的问题，但我根本无法得到这个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以帮助解决我的问题

---

这里有一个基本的例子，展示了如何做你想做的事情。 你应该能够使用这些代码并将其适用于你自己的代码。

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

链接地址: http://www.djcxy.com/p/88405.html

上一篇: Can't get 100% height to work (read most posts here and tried for 1+ hours)

下一篇: Issues when trying to clear float for div that has got a fixed height in IE6