【发布时间】：2015-04-09 06:18:44
【问题描述】：
如何消除页面底部的空间？
/* 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>【问题讨论】：
-
试过
html, body { height: 100%; margin: 0; padding: 0; }? -
很难理解您的要求。您能否简化示例代码并更清楚地传达您遇到的问题？ “底部的这个空间”不是很具有描述性。什么空间？您是指页脚和浏览器窗口底部之间的空间吗？
-
尝试编辑 OP 帖子以共享此图像，但由于“代码错误过多”而无法共享。这是他的问题的样子：i.imgur.com/YuF3BWc.png
标签： html css removing-whitespace