Question

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

我正在尝试使内容包装器100％高度，但它要居中。我已经查看了stackoverflow上的其他问题并且无法找到解决方案。也是页面末尾的固定页脚，而不是broswer窗口的底部

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 个答案: