3行垂直流体布局，流体高度 [英] 3 Row Vertically Fluid Layout, Fluid height

问题描述

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

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

当我将body的高度指定为100％时，它不工作。

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

或者我需要使用Javascript

JS：fiddle http://jsfiddle.net/EGesW/ 5 /

解决方案

  html {
 height：100％ ; 
} 
 body {
 height：100％; 
} 
 #header {
 background：＃FF9933; 
 min-height：20％; 
} 
 #content {
 background：#DDD; 
 min-height：60％; 
} 
 #footer {
 background：＃138808; 
 min-height：20％; 
} 
  

I want to achieve a vertically fluid box model

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

When i specify the body's height as 100% it doesnt work.

How do I get a vertically fluid solution in CSS.

Or do I need to use Javascript

JS:fiddle http://jsfiddle.net/EGesW/5/

解决方案

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

这篇关于3行垂直流体布局，流体高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！