Question

我想要实现垂直流体盒模型

|-------------|
|             |
|header 20%   |
|=============|
|             |
|             |
|content 60%  |
|             |
|-------------|
|             |
|footer 20%   |
|=============|

当我指定身体的高度为100％时，它不起作用。

如何在CSS中获得垂直流畅的解决方案。

或者我是否需要使用Javascript

JS：小提琴http://jsfiddle.net/EGesW/5/

Answer 1

html {
    height:100%;
}
body{
    height:100%;
}
#header{
    background:#FF9933;
    min-height:20%;
}
#content{
    background:#DDD;
    min-height:60%;
}
#footer{
    background:#138808;
    min-height:20%;
}

Answer 2

在大多数浏览器中，HTML标记也被归类为CSS中DOM的一部分。相反，将你的身体风格也应用到html

html, body { height:100%; }

matthew说，^ p ^ ^^它也打败了我

Answer 3

如果你希望身体达到100％，你必须将html的身高设置为100％（如果设置了父元素的高度，100％身高才有效）：

body,html{
    height:100%;
}

Here就是一个例子。

3排垂直流体布局，流体高度

3 个答案: