100％高度CSS，固定页脚

Question

我的代码可在http://jsfiddle.net/ATbA5/2/上查看，代码也将在本文结尾处

我试图使内容包装器的高度为100％，但要使其居中。 我查看了关于stackoverflow的其他文章，但找不到解决方案。 在页面末尾（不是浏览窗口的底部）也是固定的页脚

的HTML

 <head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<a href="index.html"><img src="primary-resources/imgs/header-logo.png" /></a>
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>

的CSS

body ,html {
    background-color:#000000;
    height:100%;
    top:0px;
    bottom:0px;
    clear:both;
    padding:0px;
    margin:0px;
}
.content-wrapper {
    margin:auto;
    background-color:#ffffff;
    width:960px;
    padding:0px;
    bottom:0;px;
    top:0px;
    margin:auto;
    box-sizing:border-box;
    height:100%;
    box-sizing:border-box;
    clear:both;
    box-sizing:border-box;

}
.header {
    width:100%;
}
.threetwentyleft {
    width:320px;
    float:left;
    padding:2px;
}
.threetwentyleft img{
    width:320px;
    padding:2px;
    border:0px;
}
.sixfortyright {
    width:630px;
    float:right;
    height:130px;
}
.gameAdBanner {
    width:610px;
    margin-top:2px;
    margin-left:auto;
    margin-right:auto;
}
.center {
    margin-left:auto;
    margin-right:auto;
}
.gameLeft {
    width:700px;
    padding:5px;
    float:left;
}
.gameRight {
    width:260px;
    background-color:#CCC;
    float:right;
    padding:5px;
    height:100%;
    margin-right:3px;
}
.footer {
    width:960px;
    background-color:#FC6;
    bottom:0px;
    height:25px;
    position:absolute;
}

Answer 1

听起来像您想要正常的html行为，不需要任何CSS，只需在内容后添加div或任何块元素即可。

100％高度CSS，固定页脚

问题描述

1 个解决方案

解决方案1
0 2013-06-18 14:13:08

100％高度CSS，固定页脚

问题描述

1 个解决方案

解决方案1 0 2013-06-18 14:13:08

解决方案1
0 2013-06-18 14:13:08