CSS双列布局-高度100％和宽度100％

Question

请看我的示例代码：

这是我的代码分享:

http://jsfiddle.net/uvk80oob/

.content {
width: 70%;
height: 100%;
float: left;
bgcolor: #f8f4eb;
}

.sidebar{
width: 200px;
height: 100%;
float: left;
background: url(http://i.imgur.com/S0I0UaN.png) repeat left top;
}

我正在尝试为个人使用和学习目的制作一个简单的布局。尝试了三个小时后，这是我能得到的最接近的结果。我需要侧边栏背景图片的高度为100％。此外，我需要内容宽度为100％。

基本上，内容div始终需要保持100％，侧边栏背景图可以固定，但需要是100％高度。

有谁能指点我正确的方向吗？非常感谢您提前的帮助！

- Hardist

---

尝试使用绝对定位。 - el Dude

有很多教程可供学习，这里提供一个2列和3列div块的教程。 - Bryan

Answer 1

请参考以下方法:

http://jsfiddle.net/uvk80oob/4/

...你可以将侧栏和内容放在一个包装器元素中，然后使用以下代码：

.wrap {
  display:table;
  height:100%;
}

.wrap > div {
  display:table-cell;
  height:100%;
}

- scooterlord