Question

我正在尝试使用CSS创建一个完整的高度列，但我有一个噩梦！

我可以管理它的唯一方法是将背景图像应用于垂直重复的body标签，但是缺点是我无法使用百分比作为列宽。

我认为证明我的问题最简单的方法是将它发布在JSFiddle上，看看这里是否有人可以提供帮助？

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

.sidebar {
    background-color: black;
    color: white;
    float: left;
    width: 20%;
    min-height: 100%;
}

.canvas {
    background-color: grey;
    width: 80%;
    float: right;
}

谢谢，

史蒂芬。

Answer 1

对于这个仍然没有非常好的解决方案，但是你可以使用table-cell css属性。不是每个人都喜欢，但它确实有很好的浏览器支持和工作：

http://jsfiddle.net/VR9Bg/

.sidebar {
    background-color: black;
    color: white;
    width: 20%;
    height: 100%;
    display: table-cell;
}

.canvas {
    background-color: grey;
    width: 80%;
    height: 100%;
    display: table-cell;
}

.wrapper {
    display: table;
}

Answer 2

参考一个问题（我不记得了），

百分比

指定百分比高度。百分比用计算   相对于生成的框的包含块的高度。如果   未明确指定包含块的高度（即，它   取决于内容高度），这个元素不是绝对的   定位后，该值计算为'auto'。

所以使用jQuery，将是一个不错的选择。

var hei = $('.canvas').height();
 $('.sidebar').height(hei);

选中此JSFiddle

使用CSS的100％列高度

2 个答案: