CSS 白色 Space 在页面底部
CSS White Space At Bottom of Page
如何去掉页面底部的space？
/* Basic Style */
html,
body {
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'Roboto', sans-serif;
font-size: 12pt;
font-weight: 100;
color: #212121;
text-decoration: none;
line-height: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
}
a:link {
color: #42b4da;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
a:visited {
color: #002946;
text-decoration: none;
}
a:active,
a:hover {
color: #670f08;
text-decoration: underline;
}
img {
border: 0px solid white;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
/* Text Formatting */
h1 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h2 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h3 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
blockquote {
font-size: 12pt;
font-style: italic;
margin: 30px 30px 30px 0;
padding: 0 0 0 20px;
border-left: 1px solid #ccc;
}
/* Clear */
.clearBoth {
clear: both;
}
/* Page Wrapper*/
#pageWrapper {
width: 100%;
height: 100%;
}
/* Page Top */
#pageTop {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
overflow: hidden;
}
#topTitle {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#topRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
/* Page Main */
#pageMain {
background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
width: 100%;
margin-top: 100px;
overflow: hidden;
}
/* Main Content */
#mainContent {
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
.contentClear {
margin-right: 250px;
}
.contentPost {
margin: 40px;
}
.postTitle {} .postContent {} .postExtras {}
/* Main Sidebar */
#mainSidebar {
background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebar h1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebar h1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebar h1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNav li:before {
content: "//";
position: relative;
left: 2px;
}
/* Page Footer */
#pageFooter {
width: 100%;
height: 100px;
overflow: hidden;
}
#footerContent {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#footerRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
<div id="pageWrapper">
<div id="pageTop">
<div id="topTitle">
This is where the pages logo/title/whatever will go.
</div>
<div id="topRight">
Rightside content
</div>
</div>
<div class="clearBoth"></div>
<div id="pageMain">
<div id="mainContent">
<div class="contentClear">
<div class="contentPost">
<div class="postTitle">
<h1>HELLO WORLD!</h1>
</div>
<div class="postExtras">
<p>
APRIL 2, 2015 1 COMMENT
</p>
</div>
<div class="postContent">
<p>
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
</p>
<p>
This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts
content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!
</p>
</div>
</div>
</div>
</div>
<div id="mainSidebar">
<div class="sidebarContent">
<h1>Navigation</h1>
<ul class="sidebarNav">
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Unordered List</h1>
<ul>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Something Else</h1>
<ol>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ol>
</div>
</div>
</div>
<div class="clearBoth"></div>
<div id="pageFooter">
<div id="footerContent">
<h1>This is the footer, and copyright stuff.</h1>
<ul>
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div id="footerRight">
<p>
SMLinks
</p>
</div>
</div>
</div>
因为你有身高：100%；在你的 html 和 body 标签上。此外，它在您的 pageWrapper class 上。这告诉浏览器无论如何都要使页面的高度至少为视口的高度，然后告诉你的内部 pageWrapper class 无论如何都要匹配那个高度。
我建议 html height: auto;首先。
我想也许您希望黑色背景页脚部分位于底部，下面没有白色 space，对吗？您可以通过将页脚部分从页面包装器中取出来做到这一点，将其放在结束主体标记之前并添加此 css:
对于 ID pageFooter 添加 css position:fixed; bottom:0;
/* Basic Style */
html,
body {
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'Roboto', sans-serif;
font-size: 12pt;
font-weight: 100;
color: #212121;
text-decoration: none;
line-height: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
}
a:link {
color: #42b4da;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
a:visited {
color: #002946;
text-decoration: none;
}
a:active,
a:hover {
color: #670f08;
text-decoration: underline;
}
img {
border: 0px solid white;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
/* Text Formatting */
h1 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h2 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h3 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
blockquote {
font-size: 12pt;
font-style: italic;
margin: 30px 30px 30px 0;
padding: 0 0 0 20px;
border-left: 1px solid #ccc;
}
/* Clear */
.clearBoth {
clear: both;
}
/* Page Wrapper*/
#pageWrapper {
width: 100%;
height: 100%;
}
/* Page Top */
#pageTop {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
overflow: hidden;
}
#topTitle {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#topRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
/* Page Main */
#pageMain {
background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
width: 100%;
margin-top: 100px;
overflow: hidden;
}
/* Main Content */
#mainContent {
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
.contentClear {
margin-right: 250px;
}
.contentPost {
margin: 40px;
}
.postTitle {} .postContent {} .postExtras {}
/* Main Sidebar */
#mainSidebar {
background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebar h1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebar h1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebar h1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNav li:before {
content: "//";
position: relative;
left: 2px;
}
/* Page Footer */
#pageFooter {
width: 100%;
height: 40px;
overflow: hidden;
}
#footerContent {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#footerRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
#footerContent h1 {
position: absolute;
right: 40%;
font-size: 12px;
color: #ccc;
}
#footerContent ul {
padding: 0;
margin: 0;
margin-left: 20px;
}
#footerContent ul li {
display: inline;
line-height: 40px;
}
/* ADD THIS TO FIX FOOTER TO BOTTOM */
#pageFooter {
position: fixed;
bottom: 0;
}
<div id="pageWrapper">
<div id="pageTop">
<div id="topTitle">
This is where the pages logo/title/whatever will go.
</div>
<div id="topRight">
Rightside content
</div>
</div>
<div class="clearBoth"></div>
<div id="pageMain">
<div id="mainContent">
<div class="contentClear">
<div class="contentPost">
<div class="postTitle">
<h1>HELLO WORLD!</h1>
</div>
<div class="postExtras">
<p>
APRIL 2, 2015 1 COMMENT
</p>
</div>
<div class="postContent">
<p>
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
</p>
<p>
This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts
content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!
</p>
</div>
</div>
</div>
</div>
<div id="mainSidebar">
<div class="sidebarContent">
<h1>Navigation</h1>
<ul class="sidebarNav">
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Unordered List</h1>
<ul>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Something Else</h1>
<ol>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ol>
</div>
</div>
</div>
<div class="clearBoth"></div>
<div id="pageFooter">
<div id="footerContent">
<h1>FIXED FOOTER ©2015 etc.</h1>
<ul>
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div id="footerRight">
<p>
SMLinks
</p>
</div>
</div>
</div>
div class "question" 的高度为 2032 像素。在这个 div 下面是一个叫做 "answer" 的空白 div，大小为 728 X 870px。可以通过缩小答案div来消除部分白色space，从而消除白色space。不过有些白space是因为答题区。要了解如何更改 CSS，请访问 http://www.w3schools.com/cssref/pr_dim_height.asp。查找这些 div 的代码位于 body、container、content、itemscope 和 mainbar 下。
我通过从你的 body 中删除 line-height:100% 来修复它。
加height:100vh给你#mainPage.
#mainPage{
height:100vh;
}
如果我的理解正确，问题是即使没有内容填充该滚动区域，也会有一个持续的垂直滚动条。
我认为这是由 "margin collapse" 造成的。
利润率暴跌的解释
您已将 div#pageTop 设置为 position:fixed，并将 margin-top:100px 添加到 div#pageMain 以将其下推至固定 header 以下。该边距随着 div#pageWrapper 崩溃，最终随着 <body>.
崩溃
由于 <body> 设置为 height:100% 并且折叠边距将其向下推 100 像素，因此 <body> 最终会高出 100 像素并导致浏览器中出现垂直滚动条。 100% + 100px 的高度 总是 大于 window 的高度，并且总是需要滚动条。
下图显示了 <body> 的顶部。请注意，它不会按预期从页面顶部开始。它从 header:
下方 100px 开始
如何修复折叠边距
有 several methods 可以防止边距折叠。在这种情况下，我建议将 div#pageMain 上的 margin-top:100px 更改为 padding:
#pageMain {
...
padding-top: 100px; /* padding instead of margin */
}
这会阻止页边距崩溃，并将 <body> 带回到 window 所属的顶部：
现在 <body> 的高度是 window 的 100%，并且没有持久滚动条。
请看下面的演示：
/* Basic Style */
html,
body {
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'Roboto', sans-serif;
font-size: 12pt;
font-weight: 100;
color: #212121;
text-decoration: none;
line-height: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
}
a:link {
color: #42b4da;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
a:visited {
color: #002946;
text-decoration: none;
}
a:active,
a:hover {
color: #670f08;
text-decoration: underline;
}
img {
border: 0px solid white;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
/* Text Formatting */
h1 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h2 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h3 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
blockquote {
font-size: 12pt;
font-style: italic;
margin: 30px 30px 30px 0;
padding: 0 0 0 20px;
border-left: 1px solid #ccc;
}
/* Clear */
.clearBoth {
clear: both;
}
/* Page Wrapper*/
#pageWrapper {
width: 100%;
height: 100%;
}
/* Page Top */
#pageTop {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
overflow: hidden;
}
#topTitle {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#topRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
/* Page Main */
#pageMain {
background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
width: 100%;
padding-top: 100px;
overflow: hidden;
}
/* Main Content */
#mainContent {
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
.contentClear {
margin-right: 250px;
}
.contentPost {
margin: 40px;
}
.postTitle {} .postContent {} .postExtras {}
/* Main Sidebar */
#mainSidebar {
background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebar h1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebar h1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebar h1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNav li:before {
content: "//";
position: relative;
left: 2px;
}
/* Page Footer */
#pageFooter {
width: 100%;
height: 100px;
overflow: hidden;
}
#footerContent {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#footerRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
<div id="pageWrapper">
<div id="pageTop">
<div id="topTitle">
This is where the pages logo/title/whatever will go.
</div>
<div id="topRight">
Rightside content
</div>
</div>
<div class="clearBoth"></div>
<div id="pageMain">
<div id="mainContent">
<div class="contentClear">
<div class="contentPost">
<div class="postTitle">
<h1>HELLO WORLD!</h1>
</div>
<div class="postExtras">
<p>
APRIL 2, 2015 1 COMMENT
</p>
</div>
<div class="postContent">
<p>
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
</p>
<p>
This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts
content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!
</p>
</div>
</div>
</div>
</div>
<div id="mainSidebar">
<div class="sidebarContent">
<h1>Navigation</h1>
<ul class="sidebarNav">
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Unordered List</h1>
<ul>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Something Else</h1>
<ol>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ol>
</div>
</div>
</div>
<div class="clearBoth"></div>
<div id="pageFooter">
<div id="footerContent">
<h1>This is the footer, and copyright stuff.</h1>
<ul>
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div id="footerRight">
<p>
SMLinks
</p>
</div>
</div>
</div>
jlane09的回答也解决了这个问题。它具有有效性，因为它有效。但是，在我看来，这个答案并不能充分解释问题的原因。此外，在某些情况下使用 height:auto 可能会导致更多问题（例如，对 child 元素使用 percentage-based 高度）。
粘性页脚
创建 "sticky" 页脚是一个单独的问题。如果您希望无论 window 是否需要滚动，页脚始终粘在 window 的底部，请参阅 Ryan Fait's (famous) sticky footer。它需要一些不同的结构，但它是值得的。
我为您构建了一个基本演示，如下所示：
/* Basic Style */
html,
body {
height: 100%;
margin: 0;
}
/* Page Wrapper*/
#pageWrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -160px;
}
/* Page Top */
#pageTop {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#topTitle {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#topRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
/* Page Main */
#pageMain {
background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
width: 100%;
padding-top: 100px;
}
/* Main Content */
#mainContent {
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
.contentClear {
margin-right: 250px;
}
.contentPost {
margin: 40px;
}
.postTitle {} .postContent {} .postExtras {}
/* Main Sidebar */
#mainSidebar {
background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebar h1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebar h1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebar h1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNav li:before {
content: "//";
position: relative;
left: 2px;
}
/* Page Footer */
#pageFooter {
width: 100%;
background-color: #262626;
}
#footerContent {
color: #CCCCCC;
width: 100%;
float: left;
margin-right: -250px;
}
#footerRight {
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
#pageFooter,
#footer_push {
height: 160px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
/* ie 6/7 */
}
<div id="pageWrapper">
<div id="pageTop">
<div id="topTitle">This is where the pages logo/title/whatever will go.</div>
<div id="topRight">Rightside content</div>
</div>
<div id="pageMain" class="clearfix">
<div id="mainContent">
<div class="contentClear">
<div class="contentPost">
<div class="postTitle">
<h1>HELLO WORLD!</h1>
</div>
<div class="postExtras">
<p>APRIL 2, 2015 1 COMMENT</p>
</div>
<div class="postContent">
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
<p>This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This
is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!</p>
</div>
</div>
</div>
</div>
<div id="mainSidebar">
<div class="sidebarContent">
<h1>Navigation</h1>
<ul class="sidebarNav">
<li> <a href="_blank">Home</a>
</li>
<li> <a href="_blank">About</a>
</li>
<li> <a href="_blank">Contact</a>
</li>
<li> <a href="_blank">Links</a>
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Unordered List</h1>
<ul>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Something Else</h1>
<ol>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
</ol>
</div>
</div>
</div>
<div id="footer_push"></div>
</div>
<div id="pageFooter">
<div id="footerContent">
<h1>This is the footer, and copyright stuff.</h1>
<ul>
<li> <a href="_blank">Home</a>
</li>
<li> <a href="_blank">About</a>
</li>
<li> <a href="_blank">Contact</a>
</li>
<li> <a href="_blank">Links</a>
</li>
</ul>
</div>
<div id="footerRight">
<p>SMLinks</p>
</div>
</div>
如何去掉页面底部的space？
/* Basic Style */
html,
body {
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'Roboto', sans-serif;
font-size: 12pt;
font-weight: 100;
color: #212121;
text-decoration: none;
line-height: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
}
a:link {
color: #42b4da;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
a:visited {
color: #002946;
text-decoration: none;
}
a:active,
a:hover {
color: #670f08;
text-decoration: underline;
}
img {
border: 0px solid white;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
/* Text Formatting */
h1 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h2 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h3 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
blockquote {
font-size: 12pt;
font-style: italic;
margin: 30px 30px 30px 0;
padding: 0 0 0 20px;
border-left: 1px solid #ccc;
}
/* Clear */
.clearBoth {
clear: both;
}
/* Page Wrapper*/
#pageWrapper {
width: 100%;
height: 100%;
}
/* Page Top */
#pageTop {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
overflow: hidden;
}
#topTitle {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#topRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
/* Page Main */
#pageMain {
background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
width: 100%;
margin-top: 100px;
overflow: hidden;
}
/* Main Content */
#mainContent {
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
.contentClear {
margin-right: 250px;
}
.contentPost {
margin: 40px;
}
.postTitle {} .postContent {} .postExtras {}
/* Main Sidebar */
#mainSidebar {
background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebar h1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebar h1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebar h1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNav li:before {
content: "//";
position: relative;
left: 2px;
}
/* Page Footer */
#pageFooter {
width: 100%;
height: 100px;
overflow: hidden;
}
#footerContent {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#footerRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
<div id="pageWrapper">
<div id="pageTop">
<div id="topTitle">
This is where the pages logo/title/whatever will go.
</div>
<div id="topRight">
Rightside content
</div>
</div>
<div class="clearBoth"></div>
<div id="pageMain">
<div id="mainContent">
<div class="contentClear">
<div class="contentPost">
<div class="postTitle">
<h1>HELLO WORLD!</h1>
</div>
<div class="postExtras">
<p>
APRIL 2, 2015 1 COMMENT
</p>
</div>
<div class="postContent">
<p>
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
</p>
<p>
This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts
content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!
</p>
</div>
</div>
</div>
</div>
<div id="mainSidebar">
<div class="sidebarContent">
<h1>Navigation</h1>
<ul class="sidebarNav">
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Unordered List</h1>
<ul>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Something Else</h1>
<ol>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ol>
</div>
</div>
</div>
<div class="clearBoth"></div>
<div id="pageFooter">
<div id="footerContent">
<h1>This is the footer, and copyright stuff.</h1>
<ul>
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div id="footerRight">
<p>
SMLinks
</p>
</div>
</div>
</div>
因为你有身高：100%；在你的 html 和 body 标签上。此外，它在您的 pageWrapper class 上。这告诉浏览器无论如何都要使页面的高度至少为视口的高度，然后告诉你的内部 pageWrapper class 无论如何都要匹配那个高度。
我建议 html height: auto;首先。
我想也许您希望黑色背景页脚部分位于底部，下面没有白色 space，对吗？您可以通过将页脚部分从页面包装器中取出来做到这一点，将其放在结束主体标记之前并添加此 css:
对于 ID pageFooter 添加 css position:fixed; bottom:0;
/* Basic Style */
html,
body {
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'Roboto', sans-serif;
font-size: 12pt;
font-weight: 100;
color: #212121;
text-decoration: none;
line-height: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
}
a:link {
color: #42b4da;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
a:visited {
color: #002946;
text-decoration: none;
}
a:active,
a:hover {
color: #670f08;
text-decoration: underline;
}
img {
border: 0px solid white;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
/* Text Formatting */
h1 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h2 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h3 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
blockquote {
font-size: 12pt;
font-style: italic;
margin: 30px 30px 30px 0;
padding: 0 0 0 20px;
border-left: 1px solid #ccc;
}
/* Clear */
.clearBoth {
clear: both;
}
/* Page Wrapper*/
#pageWrapper {
width: 100%;
height: 100%;
}
/* Page Top */
#pageTop {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
overflow: hidden;
}
#topTitle {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#topRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
/* Page Main */
#pageMain {
background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
width: 100%;
margin-top: 100px;
overflow: hidden;
}
/* Main Content */
#mainContent {
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
.contentClear {
margin-right: 250px;
}
.contentPost {
margin: 40px;
}
.postTitle {} .postContent {} .postExtras {}
/* Main Sidebar */
#mainSidebar {
background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebar h1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebar h1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebar h1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNav li:before {
content: "//";
position: relative;
left: 2px;
}
/* Page Footer */
#pageFooter {
width: 100%;
height: 40px;
overflow: hidden;
}
#footerContent {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#footerRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
#footerContent h1 {
position: absolute;
right: 40%;
font-size: 12px;
color: #ccc;
}
#footerContent ul {
padding: 0;
margin: 0;
margin-left: 20px;
}
#footerContent ul li {
display: inline;
line-height: 40px;
}
/* ADD THIS TO FIX FOOTER TO BOTTOM */
#pageFooter {
position: fixed;
bottom: 0;
}
<div id="pageWrapper">
<div id="pageTop">
<div id="topTitle">
This is where the pages logo/title/whatever will go.
</div>
<div id="topRight">
Rightside content
</div>
</div>
<div class="clearBoth"></div>
<div id="pageMain">
<div id="mainContent">
<div class="contentClear">
<div class="contentPost">
<div class="postTitle">
<h1>HELLO WORLD!</h1>
</div>
<div class="postExtras">
<p>
APRIL 2, 2015 1 COMMENT
</p>
</div>
<div class="postContent">
<p>
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
</p>
<p>
This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts
content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!
</p>
</div>
</div>
</div>
</div>
<div id="mainSidebar">
<div class="sidebarContent">
<h1>Navigation</h1>
<ul class="sidebarNav">
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Unordered List</h1>
<ul>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Something Else</h1>
<ol>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ol>
</div>
</div>
</div>
<div class="clearBoth"></div>
<div id="pageFooter">
<div id="footerContent">
<h1>FIXED FOOTER ©2015 etc.</h1>
<ul>
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div id="footerRight">
<p>
SMLinks
</p>
</div>
</div>
</div>
div class "question" 的高度为 2032 像素。在这个 div 下面是一个叫做 "answer" 的空白 div，大小为 728 X 870px。可以通过缩小答案div来消除部分白色space，从而消除白色space。不过有些白space是因为答题区。要了解如何更改 CSS，请访问 http://www.w3schools.com/cssref/pr_dim_height.asp。查找这些 div 的代码位于 body、container、content、itemscope 和 mainbar 下。
我通过从你的 body 中删除 line-height:100% 来修复它。
加height:100vh给你#mainPage.
#mainPage{
height:100vh;
}
如果我的理解正确，问题是即使没有内容填充该滚动区域，也会有一个持续的垂直滚动条。
我认为这是由 "margin collapse" 造成的。
利润率暴跌的解释
您已将 div#pageTop 设置为 position:fixed，并将 margin-top:100px 添加到 div#pageMain 以将其下推至固定 header 以下。该边距随着 div#pageWrapper 崩溃，最终随着 <body>.
由于 <body> 设置为 height:100% 并且折叠边距将其向下推 100 像素，因此 <body> 最终会高出 100 像素并导致浏览器中出现垂直滚动条。 100% + 100px 的高度 总是 大于 window 的高度，并且总是需要滚动条。
下图显示了 <body> 的顶部。请注意，它不会按预期从页面顶部开始。它从 header:
如何修复折叠边距
有 several methods 可以防止边距折叠。在这种情况下，我建议将 div#pageMain 上的 margin-top:100px 更改为 padding:
#pageMain {
...
padding-top: 100px; /* padding instead of margin */
}
这会阻止页边距崩溃，并将 <body> 带回到 window 所属的顶部：
现在 <body> 的高度是 window 的 100%，并且没有持久滚动条。
请看下面的演示：
/* Basic Style */
html,
body {
height: 100%;
}
body {
background-color: #FFFFFF;
font-family: 'Roboto', sans-serif;
font-size: 12pt;
font-weight: 100;
color: #212121;
text-decoration: none;
line-height: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
}
a:link {
color: #42b4da;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
a:visited {
color: #002946;
text-decoration: none;
}
a:active,
a:hover {
color: #670f08;
text-decoration: underline;
}
img {
border: 0px solid white;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
/* Text Formatting */
h1 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h2 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
h3 {
font-size: 20pt;
color: #212121;
font-weight: lighter;
}
blockquote {
font-size: 12pt;
font-style: italic;
margin: 30px 30px 30px 0;
padding: 0 0 0 20px;
border-left: 1px solid #ccc;
}
/* Clear */
.clearBoth {
clear: both;
}
/* Page Wrapper*/
#pageWrapper {
width: 100%;
height: 100%;
}
/* Page Top */
#pageTop {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
overflow: hidden;
}
#topTitle {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#topRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
/* Page Main */
#pageMain {
background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
width: 100%;
padding-top: 100px;
overflow: hidden;
}
/* Main Content */
#mainContent {
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
.contentClear {
margin-right: 250px;
}
.contentPost {
margin: 40px;
}
.postTitle {} .postContent {} .postExtras {}
/* Main Sidebar */
#mainSidebar {
background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebar h1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebar h1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebar h1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNav li:before {
content: "//";
position: relative;
left: 2px;
}
/* Page Footer */
#pageFooter {
width: 100%;
height: 100px;
overflow: hidden;
}
#footerContent {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#footerRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
<div id="pageWrapper">
<div id="pageTop">
<div id="topTitle">
This is where the pages logo/title/whatever will go.
</div>
<div id="topRight">
Rightside content
</div>
</div>
<div class="clearBoth"></div>
<div id="pageMain">
<div id="mainContent">
<div class="contentClear">
<div class="contentPost">
<div class="postTitle">
<h1>HELLO WORLD!</h1>
</div>
<div class="postExtras">
<p>
APRIL 2, 2015 1 COMMENT
</p>
</div>
<div class="postContent">
<p>
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
</p>
<p>
This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts
content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!
</p>
</div>
</div>
</div>
</div>
<div id="mainSidebar">
<div class="sidebarContent">
<h1>Navigation</h1>
<ul class="sidebarNav">
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Unordered List</h1>
<ul>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Something Else</h1>
<ol>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
<li>
Here is an unordered list in the sidebar.
</li>
</ol>
</div>
</div>
</div>
<div class="clearBoth"></div>
<div id="pageFooter">
<div id="footerContent">
<h1>This is the footer, and copyright stuff.</h1>
<ul>
<li>
<a href="_blank">Home</a>
</li>
<li>
<a href="_blank">About</a>
</li>
<li>
<a href="_blank">Contact</a>
</li>
<li>
<a href="_blank">Links</a>
</li>
</ul>
</div>
<div id="footerRight">
<p>
SMLinks
</p>
</div>
</div>
</div>
jlane09的回答也解决了这个问题。它具有有效性，因为它有效。但是，在我看来，这个答案并不能充分解释问题的原因。此外，在某些情况下使用 height:auto 可能会导致更多问题（例如，对 child 元素使用 percentage-based 高度）。
粘性页脚
创建 "sticky" 页脚是一个单独的问题。如果您希望无论 window 是否需要滚动，页脚始终粘在 window 的底部，请参阅 Ryan Fait's (famous) sticky footer。它需要一些不同的结构，但它是值得的。
我为您构建了一个基本演示，如下所示：
/* Basic Style */
html,
body {
height: 100%;
margin: 0;
}
/* Page Wrapper*/
#pageWrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -160px;
}
/* Page Top */
#pageTop {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#topTitle {
background-color: #262626;
color: #CCCCCC;
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
#topRight {
background-color: #262626;
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
/* Page Main */
#pageMain {
background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right;
width: 100%;
padding-top: 100px;
}
/* Main Content */
#mainContent {
width: 100%;
height: 100%;
float: left;
margin-right: -250px;
}
.contentClear {
margin-right: 250px;
}
.contentPost {
margin: 40px;
}
.postTitle {} .postContent {} .postExtras {}
/* Main Sidebar */
#mainSidebar {
background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebar h1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebar h1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebar h1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNav li:before {
content: "//";
position: relative;
left: 2px;
}
/* Page Footer */
#pageFooter {
width: 100%;
background-color: #262626;
}
#footerContent {
color: #CCCCCC;
width: 100%;
float: left;
margin-right: -250px;
}
#footerRight {
color: #CCCCCC;
width: 250px;
height: 100%;
float: right;
}
#pageFooter,
#footer_push {
height: 160px;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
/* ie 6/7 */
}
<div id="pageWrapper">
<div id="pageTop">
<div id="topTitle">This is where the pages logo/title/whatever will go.</div>
<div id="topRight">Rightside content</div>
</div>
<div id="pageMain" class="clearfix">
<div id="mainContent">
<div class="contentClear">
<div class="contentPost">
<div class="postTitle">
<h1>HELLO WORLD!</h1>
</div>
<div class="postExtras">
<p>APRIL 2, 2015 1 COMMENT</p>
</div>
<div class="postContent">
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
<p>This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This
is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!! This is the posts content; yeah!!</p>
</div>
</div>
</div>
</div>
<div id="mainSidebar">
<div class="sidebarContent">
<h1>Navigation</h1>
<ul class="sidebarNav">
<li> <a href="_blank">Home</a>
</li>
<li> <a href="_blank">About</a>
</li>
<li> <a href="_blank">Contact</a>
</li>
<li> <a href="_blank">Links</a>
</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Unordered List</h1>
<ul>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
</ul>
</div>
<div class="sidebarContent">
<h1>Something Else</h1>
<ol>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
<li>Here is an unordered list in the sidebar.</li>
</ol>
</div>
</div>
</div>
<div id="footer_push"></div>
</div>
<div id="pageFooter">
<div id="footerContent">
<h1>This is the footer, and copyright stuff.</h1>
<ul>
<li> <a href="_blank">Home</a>
</li>
<li> <a href="_blank">About</a>
</li>
<li> <a href="_blank">Contact</a>
</li>
<li> <a href="_blank">Links</a>
</li>
</ul>
</div>
<div id="footerRight">
<p>SMLinks</p>
</div>
</div>