我正在投资组合网站上工作。我想弄清楚为什么我主页上的主要部分向下延伸了这么远，但在其他页面上却停在内容的正下方。这是代码。
所有页面的CSS：
body {
background-color:#A6FFFF;
width:100%;
}
#header, #main, #footer {
display:block;
position:relative;
float:left;
}
#header, #footer {
width:100%;
height:15%;
}
#header {
margin-bottom:2px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#footer {
margin-top:2px;
text-align:right;
border:2px;
}
#main {
position:relative;
width:70%;
height:100%;
margin:0 auto;
background-color:#FFF;
float:center;
}
#nav {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li {
display:inline;
}
#nav a {
display:inline-block;
padding:10px;
}
主页 HTML：
<body>
<div class="auto-style1">
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li><a href="homepage.html">Homepage</a></li>
<li><a href="tipsandtricks.html">Tips and Tricks</a></li>
<li><a href="aboutme.html">About me</a></li>
<li><a href="getintouch.html">Get in Touch</a></li>
</ul>
</div>
<div id="main">Main
<h2>A passion for design and a creative mind.</h2>
<h3>Design, Develop, Dream</h3>
</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jon Mo</h3>
</div>
</div>
</body>
其他页面 HTML：
<body>
<body>
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li><a href="homepage.html">Homepage</a></li>
<li><a href="tipsandtricks.html">Tips and Tricks</a></li>
<li><a href="aboutme.html">About me</a></li>
<li><a href="getintouch.html">Get in Touch</a></li>
</ul>
</div>
<div id="main">Main
<h1>Tips-and-Tricks</h1>
<h2>Keyboard Shortcuts</h2>
<h2>Cut, Copy, Paste shortcuts</h2>
<p>The keyboard is not used as often as it could or should be. Sure it is used for typing documents or searches on the internet and such.
<br>But do you really know how to use the keyboard to the best of your abilities? This is where I will show you the cut, copy, and paste shortcuts.
<br>Now these are ways to make using the keyboard simplier instead of just using the mouse. So you yourself as a computer user can possibly be
<br>more advanced and efficent. Now the keyboard functions are not hard to use. Below I will list the cut, copy, and paste keyboard shortcuts.
<br>The keyboard shortcuts require you to hold down two different keys at the same time.</p>
<p>First you will select the text or the image that you would like to cut or copy. When you do that it will look highlighted.</p>
<p>Second you will press the control key. The control key is shown as <strong>ctrl</strong> on the keyboard next to the shift button.</p>
<p>Third and finally, while you will continue holding down the <strong>ctrl</strong> key you will press either the x, c or v key for the desired function</p>
<h2>CUT</h2>
<p>The cut command or shortcut is used simply to remove texts or images from a screen that you are currently working on.
<br>The cut shortcut moves the information to a place where it is stored and is readily available unless it is overwritten by the next cut or copy command.</p>
<br>
<p>Below you will see the keys that are used to do the cut shortcut function</p>
<img src="images/keyboardshortcutcut.png" alt="Cut Shortcut Key" />
<h2>COPY</h2>
<p>The copy command is used as stated. It copies the text or images from the screen that you have selected and strores it.
<br>Also until it is overwritten by the next cut or copy command.</p>
<br>
<p>In the image below you will see the keys that are used to do the copy shortcut function.</p>
<img src="images/keyboardshortcutcopy.png" alt="Copy Shortcut Key" />
<h2>PASTE</h2>
<p>The paste command is used to place the information whether it be an image or text that you have stored on your
<br>virtual clipboard in the location that you have placed your cursor mouse.</p>
<p>Below in the image you will see the third and final funtction shortcut key which is used to do the paste shortcut function</p>
<img src="images/keyboardshortcutpaste.png" alt="Paste Shortcut Key" />
</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jon Mo<h3>
</div>
</body>