我是 HTML5 世界的新手，我正在尝试构建一个布局，以便让我更好地理解如何从 HTML4 继续前进。我目前已经构建了一个布局但想检查一下:
如果我的代码编写正确(任何提示或建议将不胜感激，因为我是第一次用 HTML5 编写代码，所以想确保我做的事情是正确的)
尝试将页脚固定在页面底部，与侧边栏和 section2 稍微重叠，但目前它显示在页面中间。
我在 Firefox 和使用 Firebug 中查看网站时注意到，网站显示的尺寸与我在 CSS 中定义的尺寸不符，所以我想了解这是为什么。
以下是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
</head>
<body>
<div id ="container">
<header>
<h1>This my Header</h1>
<nav><h2>My Navigation Bar<h2></nav>
</header>
<div id="banners"><h2>My Banners<h2></div>
<aside id="sidebar"><h2>My SideBar<h2></aside>
<section id="content"><h2>This is my section1</h2></section>
<section id="list"><h2>This is my section2</h2></section>
</div>
<footer>
<h3>This is my footer</h3>
</footer>
</body>
</html>
我的 CSS:
body {
background:#FFF;
}
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
}
header {
margin:0;
padding:0px;
text-align:center;
height:166px;
}
nav {
height:65px;
text-align:center;
background:#CCC;
}
#banners {
margin:0;
height:253px;
background:#01AEF0;
text-align:center;
}
#sidebar {
height:600px;
width:310px;
background:#ec8400;
float:left;
text-align:center;
}
#content {
height:300px;
width:650px;
background:#CCC;
float:right;
text-align:center;
}
#list {
height:300px;
width:650px;
background:#01AEEF;
float:right;
text-align:center;
}
footer {
margin:0;
padding:0;
text-align:center;
font-weight:bold;
height:167px;
background:#efefef;
z-index:-1px;
text-align:center;
}
在此先感谢您的关注，如有任何建议，我们将不胜感激。
最佳答案
在 css 文件中给 'container' 的高度应该是 'px'...
例子
#container {
边距:0px 自动 0px 自动；
宽度:960px；
边框:1px 实心#CCC；
高度:600px
}
应该没问题
关于css - HTML5 布局和页脚错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32966719/