HTML5布局和页脚错误

Question

我是HTML5领域的新手，我正在尝试构建一种布局，以使我更好地了解如何从HTML4过渡。 我目前已建立布局，但想检查一下：

1. 如果我的代码编写正确（任何提示或建议，我们将不胜感激，因为我第一次用HTML5编写，因此请确保即时消息正确运行）

2. 试图将页脚固定在页面底部，使侧边栏和section2稍微重叠，但目前它显示在页面中间。

3. 我注意到在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;
}

在此先感谢您的关注，任何建议将不胜感激。

Answer 1

在css文件中给'容器'赋予高度应在'px'中...

例

#container { margin: 0px auto 0px auto; width:960px; border:1px solid #CCC; height: 600px }

它应该工作正常

Answer 2

首先要执行的一些步骤：删除默认的浏览器边距和填充。

* {
    margin: 0px;
    padding: 0px;
}

从.header，.footer和#banner中删除margin：0和padding：0 。

使用meta视口标记使它更具响应性：

<head>
    <title>BrightBees Layout</title>
    <link href="styles2.css" rel="stylesheet" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Answer 3

使用类而不是ID，因为它们太具体了。 保留JS的ID。

有关ID和类之间的区别，请参见此处： https : //css-tricks.com/the-difference-between-id-and-class/

Answer 4

我在css文件的页脚标记中添加了以下内容，这与我所需的侧边栏/部分重叠。

margin-top: -80px;

谢谢你们为我看这个，非常感谢。