0

我的代码可在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;
}
4

1 回答 1

0

听起来你想要正常的 html 行为,不需要任何 css,只需在内容后添加一个 div 或任何块元素。

于 2013-06-18T14:13:08.677 回答