Question

我正在尝试使用百分比宽度创建三列布局。在搜索谷歌并阅读一些文章后，我发现这个布局是Holy Grail网页设计的一部分。我已经采用了本网站提供的示例：The Perfect 3 Column Liquid Layout (Percentage widths)并修改了宽度，因为我需要左右列的宽度为20％。但在这种布局中并没有覆盖100％的高度。此布局的高度等于三列的最大高度。使用min-height:100%或height:100%不起作用。这是我的jsFiddle。

Answer 1

See this fiddle

只需将身高100％设为html，身体：

html,body{
    height:100%;
}

并且还给内部三列100％高度;

.colright,
.colmid,
.colleft {
    float:left;
    width:100%;         
    position:relative;
    height:100%;
}

Answer 2

身高：100％没有任何东西。

你需要在css中固定的元素宽度和高度，这样孩子们可以继承它的值来计算它的百分比：

html, body, .colmask, .colmid, .colleft
{
    height:100%;
    margin:0;
}
.col1, .col2, .col3 {
    min-height:100%;
}

CSS = 级联样式表:) 演示：http://jsfiddle.net/tapas_23571113/BNjU5/1/

圣杯3列全高度布局

2 个答案:

See this fiddle