-1

我正在尝试使用 CSS 创建一个全高列，但我做噩梦了！

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

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

http://jsfiddle.net/smclintock/xZw6n/

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

谢谢，

史蒂文。

4

2 回答 2

4

老实说，这仍然没有很好的解决方案，但是您可以使用 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;
}
于 2013-06-28T09:25:12.727 回答
-1

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

百分比

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

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

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

检查这个JSFiddle

于 2013-06-28T09:18:26.743 回答