css与页眉，页脚和多栏布局scrled

问题描述：

我正在尝试创建一个网页布局模板我的目标是页眉，页脚和2列之间，2栏是什么都给我最大的头痛，我想左列为固定宽度，右侧列填充剩余区域，我也成功完成了这一项。但我也希望这两列'垂直填充雨区，当内容填充超过我看每列要分别骂而不使用正常的Brower滚动条的空间css与页眉，页脚和多栏布局scrled

我目前的html代码是如下

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="./style/default/style.css" /> 
</head> 
<body> 
    <div class="container"> 
    <div class="header"> 
    HEADER 
    </div> 
    <div class="content"> 
     <div class="content-contain"> 
     <div id="content-col1"> 
     COLUMN 1 
     </div> 
     <div id="content-col2"> 
     COLUMN 2 
     </div> 
     </div> 
    </div> 
    </div> 
<div class="footer"> 
    FOOTER 
</div> 
</body> 
</html>

CSS

* { 
    margin: auto; 
} 

html, body { 
    height: 99%; 
    background-color: #FFFFFF; 
    font-family:sans-serif; 
} 

.container { 
    min-height: 100%; 
    height: auto !important; 
    height: 99%; 
    margin: 0 auto -1em; 
} 

.header { 
    color:#FFFFFF; 
    background-color:blue; 
    border-bottom:3px solid blue; 
} 

div#content-col1{ 
    float:left; 
    width:220px; 
    padding:3px; 
    display:block; 
    padding-left:5px; 
    overflow-y: auto; 
    background-color: red; 
} 

div#content-col2{ 
    margin-left: 230px; 
    margin-bottom:40px; 
    padding: 3px; 
    overflow-y: auto; 
    background-color: green; 
} 

.footer { 
    background-color:yellow; 
    clear:both; 
}

如果任何人有一个更好的或知道我能做些什么，使这项工作SUCESSFUL LY请让我知道

Vip32

http://jsfiddle.net/ERWES/ there – ashley 2013-02-15 12:30:55

答

为两列，其中一个有一个固定的，请参阅this question填满整个宽度。

垂直填充有点不同。默认情况下，body和block元素具有动态高度。因为body也是动态的，所以您必须将其设置为高度，以便使内容垂直完整。

body, div#container, ... { height: 100%; }

有些人认为最好也将高度应用于html元素。我有我的疑惑，因为该标签不可见。

如果您还有一个元素需要一些高度，例如页眉或页脚，请参考the same solution for fixed width's，但将其应用于高度。

似乎到达那里，但我仍然有问题，因为它是100％的所有窗口大小不只是100％的页眉和页脚之间的空间。 – vip32 2013-02-15 14:28:11

你读过我答案的最后一段吗？ “如果你有一个元素需要一定的高度，比如页眉或页脚，请参考相同的解决方案来获得固定宽度，但将其应用于高度上。” – 2013-02-15 16:08:57

css与页眉，页脚和多栏布局scrled

相关推荐