页面底部的 CSS 空白
[英] CSS White Space At Bottom of Page
本文介绍了页面底部的 CSS 空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何去掉页面底部的空格?
/* 基本样式 */html,身体 {高度:100%；}身体 {背景色:#FFFFFF；字体系列:'Roboto'，无衬线；字体大小:12pt；字体粗细:100；颜色:#212121；文字装饰:无；行高:100%；高度:100%；边距:0px 0px 0px 0px;}一条链接 {颜色:#42b4da；字体系列:'Roboto'，无衬线；文字装饰:无；}一个:访问过{颜色:#002946；文字装饰:无；}一:主动，一个:悬停{颜色:#670f08；文字装饰:下划线；}图像{边框:0px纯白色；边距:0px；填充:0px；}.清除 {清楚:两者；}/* 文本格式 */h1{字体大小:20pt；颜色:#212121；字体粗细:更轻；}h2{字体大小:20pt；颜色:#212121；字体粗细:更轻；}h3{字体大小:20pt；颜色:#212121；字体粗细:更轻；}块引用 {字体大小:12pt；字体样式:斜体；边距:30px 30px 30px 0；填充:0 0 0 20px；左边框:1px 实心 #ccc;}/* 清除 */.clearBoth {清楚:两者；}/* 页面包装器*/#pageWrapper {宽度:100%；高度:100%；}/* 页面顶部 */#pageTop {宽度:100%；高度:100px；位置:固定；顶部:0；左:0；z-索引:100；溢出:隐藏；}#topTitle {背景颜色:#262626；颜色:#CCCCCC；宽度:100%；高度:100%；向左飘浮;边距右:-250px；}#右上 {背景颜色:#262626；颜色:#CCCCCC；宽度:250px；高度:100%；浮动:对；}/* 页面主 */#pageMain {背景:#ffffff url(../style/images/sidebarBackground.gif) 重复-y 对；宽度:100%；边距顶部:100px；溢出:隐藏；}/* 主要内容 */#mainContent {宽度:100%；高度:100%；向左飘浮;边距右:-250px；}.contentClear {右边距:250px；}.contentPost {边距:40px；}.postTitle {} .postContent {} .postExtras {}/* 主侧边栏 */#mainSidebar {背景:#262626 url(../style/images/sidebarBackground.gif) 重复-y 对；颜色:#CCCCCC；宽度:220px；边距:15px；高度:100%；浮动:对；}#mainSidebar h1 {颜色:#CCCCCC；字体:14pt'Roboto'，无衬线；文本对齐:居中；边距:2px；填充:2px；}#mainSidebar h1:before {内容:‹"；位置:相对；左:-2px；}#mainSidebar h1:after {内容:›"；位置:相对；左:2px；}.sidebarContent {} .sidebarNav {边距:0；填充:0；列表样式:无；}.sidebarNav li:before {内容: "//";位置:相对；左:2px；}/* 页脚 */#pageFooter {宽度:100%；高度:100px；溢出:隐藏；}#footerContent {背景颜色:#262626；颜色:#CCCCCC；宽度:100%；高度:100%；向左飘浮;边距右:-250px；}#footerRight {背景颜色:#262626；颜色:#CCCCCC；宽度:250px；高度:100%；浮动:对；}
<div id="pageTop"><div id="topTitle">这是页面徽标/标题/任何内容的位置.
<div id="topRight">右侧内容
<div class="clearBoth"></div><div id="pageMain"><div id="mainContent"><div class="contentClear"><div class="contentPost"><div class="postTitle"><h1>你好世界！</h1>
<div class="postExtras"><p>2015 年 4 月 2 日 1 条评论</p>
<div class="postContent"><p>欢迎使用 WordPress.这是你的第一篇文章.编辑或者删除它，然后开始写博客！</p><p>这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容;是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！</p>
<div id="mainSidebar"><div class="sidebarContent"><h1>导航</h1><ul class="sidebarNav"><li><a href="_blank">首页</a><li><a href="_blank">关于</a><li><a href="_blank">联系方式</a><li><a href="_blank">链接</a>
<div class="sidebarContent"><h1>无序列表</h1><ul><li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.
<div class="sidebarContent"><h1>别的东西</h1><ol><li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.</ol>
<div class="clearBoth"></div><div id="pageFooter"><div id="footerContent"><h1>这是页脚和版权内容.</h1><ul><li><a href="_blank">首页</a><li><a href="_blank">关于</a><li><a href="_blank">联系方式</a><li><a href="_blank">链接</a>
<div id="footerRight"><p>SMLinks</p>
解决方案
如果我理解正确，问题是即使没有内容填充滚动区域，也会有一个持久的垂直滚动条.
我认为这是由来防止边距塌陷.在这种情况下，我建议将 div#pageMain 上的 margin-top:100px 更改为填充:
#pageMain {...填充顶部:100px；/* 填充而不是边距 */}
这会阻止边距折叠并使
现在
请看下面的演示:
/* 基本样式 */html,身体 {高度:100%；}身体 {背景色:#FFFFFF；字体系列:'Roboto'，无衬线；字体大小:12pt；字体粗细:100；颜色:#212121；文字装饰:无；行高:100%；高度:100%；边距:0px 0px 0px 0px;}一条链接 {颜色:#42b4da；字体系列:'Roboto'，无衬线；文字装饰:无；}一个:访问过{颜色:#002946；文字装饰:无；}一:主动，一个:悬停{颜色:#670f08；文字装饰:下划线；}图像{边框:0px纯白色；边距:0px；填充:0px；}.清除 {清楚:两者；}/* 文本格式 */h1{字体大小:20pt；颜色:#212121；字体粗细:更轻；}h2{字体大小:20pt；颜色:#212121；字体粗细:更轻；}h3{字体大小:20pt；颜色:#212121；字体粗细:更轻；}块引用 {字体大小:12pt；字体样式:斜体；边距:30px 30px 30px 0；填充:0 0 0 20px；左边框:1px 实心 #ccc;}/* 清除 */.clearBoth {清楚:两者；}/* 页面包装器*/#pageWrapper {宽度:100%；高度:100%；}/* 页面顶部 */#pageTop {宽度:100%；高度:100px；位置:固定；顶部:0；左:0；z-索引:100；溢出:隐藏；}#topTitle {背景颜色:#262626；颜色:#CCCCCC；宽度:100%；高度:100%；向左飘浮;边距右:-250px；}#右上 {背景颜色:#262626；颜色:#CCCCCC；宽度:250px；高度:100%；浮动:对；}/* 页面主 */#pageMain {背景:#ffffff url(../style/images/sidebarBackground.gif) 重复-y 对；宽度:100%；填充顶部:100px；溢出:隐藏；}/* 主要内容 */#mainContent {宽度:100%；高度:100%；向左飘浮;边距右:-250px；}.contentClear {右边距:250px；}.contentPost {边距:40px；}.postTitle {} .postContent {} .postExtras {}/* 主侧边栏 */#mainSidebar {背景:#262626 url(../style/images/sidebarBackground.gif) 重复-y 对；颜色:#CCCCCC；宽度:220px；边距:15px；高度:100%；浮动:对；}#mainSidebar h1 {颜色:#CCCCCC；字体:14pt'Roboto'，无衬线；文本对齐:居中；边距:2px；填充:2px；}#mainSidebar h1:before {内容:‹"；位置:相对；左:-2px；}#mainSidebar h1:after {内容:›"；位置:相对；左:2px；}.sidebarContent {} .sidebarNav {边距:0；填充:0；列表样式:无；}.sidebarNav li:before {内容: "//";位置:相对；左:2px；}/* 页脚 */#pageFooter {宽度:100%；高度:100px；溢出:隐藏；}#footerContent {背景颜色:#262626；颜色:#CCCCCC；宽度:100%；高度:100%；向左飘浮;边距右:-250px；}#footerRight {背景颜色:#262626；颜色:#CCCCCC；宽度:250px；高度:100%；浮动:对；}
<div id="pageTop"><div id="topTitle">这是页面徽标/标题/任何内容的位置.
<div id="topRight">右侧内容
<div class="clearBoth"></div><div id="pageMain"><div id="mainContent"><div class="contentClear"><div class="contentPost"><div class="postTitle"><h1>你好世界！</h1>
<div class="postExtras"><p>2015 年 4 月 2 日 1 条评论</p>
<div class="postContent"><p>欢迎使用 WordPress.这是你的第一篇文章.编辑或者删除它，然后开始写博客！</p><p>这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容;是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！</p>
<div id="mainSidebar"><div class="sidebarContent"><h1>导航</h1><ul class="sidebarNav"><li><a href="_blank">首页</a><li><a href="_blank">关于</a><li><a href="_blank">联系方式</a><li><a href="_blank">链接</a>
<div class="sidebarContent"><h1>无序列表</h1><ul><li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.
<div class="sidebarContent"><h1>别的东西</h1><ol><li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.<li>这是侧边栏中的无序列表.</ol>
<div class="clearBoth"></div><div id="pageFooter"><div id="footerContent"><h1>这是页脚和版权内容.</h1><ul><li><a href="_blank">首页</a><li><a href="_blank">关于</a><li><a href="_blank">联系方式</a><li><a href="_blank">链接</a>
<div id="footerRight"><p>SMLinks</p>
jlane09 的回答也解决了这个问题.它有效，因为它有效.但是，在我看来，该答案并不能充分解释问题的原因.此外，在某些情况下使用 height:auto 可能会导致更多问题(例如，对子元素使用基于百分比的高度).
<小时>粘性页脚
创建粘性"页脚是一个单独的问题.如果您希望无论窗口是否需要滚动，页脚始终贴在窗口底部，请参阅 RyanFait 的(著名的)粘性页脚.它需要一些不同的结构，但值得.
我为您构建了一个基本的演示，如下所示:
/* 基本样式 */html,身体 {高度:100%；边距:0；}/* 页面包装器*/#pageWrapper {最小高度:100%；高度:自动！重要；高度:100%；边距:0 0 -160px；}/* 页面顶部 */#pageTop {宽度:100%；高度:100px；位置:固定；顶部:0；左:0；z-索引:100；}#topTitle {背景颜色:#262626；颜色:#CCCCCC；宽度:100%；高度:100%；向左飘浮;边距右:-250px；}#右上 {背景颜色:#262626；颜色:#CCCCCC；宽度:250px；高度:100%；浮动:对；}/* 页面主 */#pageMain {背景:#ffffff url(../style/images/sidebarBackground.gif) 重复-y 对；宽度:100%；填充顶部:100px；}/* 主要内容 */#mainContent {宽度:100%；高度:100%；向左飘浮;边距右:-250px；}.contentClear {右边距:250px；}.contentPost {边距:40px；}.postTitle {} .postContent {} .postExtras {}/* 主侧边栏 */#mainSidebar {背景:#262626 url(../style/images/sidebarBackground.gif) 重复-y 对；颜色:#CCCCCC；宽度:220px；边距:15px；高度:100%；浮动:对；}#mainSidebar h1 {颜色:#CCCCCC；字体:14pt'Roboto'，无衬线；文本对齐:居中；边距:2px；填充:2px；}#mainSidebar h1:before {内容:‹"；位置:相对；左:-2px；}#mainSidebar h1:after {内容:›"；位置:相对；左:2px；}.sidebarContent {} .sidebarNav {边距:0；填充:0；列表样式:无；}.sidebarNav li:before {内容: "//";位置:相对；左:2px；}/* 页脚 */#pageFooter {宽度:100%；背景颜色:#262626；}#footerContent {颜色:#CCCCCC；宽度:100%；向左飘浮;边距右:-250px；}#footerRight {颜色:#CCCCCC；宽度:250px；高度:100%；浮动:对；}#页脚，#footer_push {高度:160px；}.clearfix:之前，.clearfix:后{内容: "";显示:表；}.clearfix:后{清楚:两者；}.clearfix {缩放:1；/* 即 6/7 */}
<div id="pageTop"><div id="topTitle">这是页面徽标/标题/任何内容的位置.</div><div id="topRight">右侧内容</div>
<div id="pageMain" class="clearfix"><div id="mainContent"><div class="contentClear"><div class="contentPost"><div class="postTitle"><h1>你好世界！</h1>
<div class="postExtras"><p>2015 年 4 月 2 日 1 条评论</p>
<div class="postContent"><p>欢迎使用 WordPress.这是你的第一篇文章.编辑或删除它，然后开始写博客！</p><p>这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这个是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是的！！这是帖子内容；是啊！！</p>
<div id="mainSidebar"><div class="sidebarContent"><h1>导航</h1><ul class="sidebarNav"><li><a href="_blank">首页</a><li><a href="_blank">关于</a><li><a href="_blank">联系方式</a><li><a href="_blank">链接</a>
<div class="sidebarContent"><h1>无序列表</h1><ul><li>这是侧边栏中的一个无序列表.</li><li>这是侧边栏中的一个无序列表.</li><li>这是侧边栏中的一个无序列表.</li><li>这是侧边栏中的一个无序列表.</li>
<div class="sidebarContent"><h1>别的东西</h1><ol><li>这是侧边栏中的一个无序列表.</li><li>这是侧边栏中的一个无序列表.</li><li>这是侧边栏中的一个无序列表.</li><li>这是侧边栏中的一个无序列表.</li></ol>
<div id="footer_push"></div>
<div id="pageFooter"><div id="footerContent"><h1>这是页脚和版权内容.</h1><ul><li><a href="_blank">首页</a><li><a href="_blank">关于</a><li><a href="_blank">联系方式</a><li><a href="_blank">链接</a>
<div id="footerRight"><p>SMLinks</p>
How can I get rid of the space at the bottom of the page?
/* 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>
解决方案
If I'm understanding correctly, the problem is that there's a persistent vertical scroll bar even when there is no content to fill that scroll area.
I believe this is caused by "margin collapse".
Explaination of the Margin Collapse
You've set div#pageTop to position:fixed and you've added margin-top:100px to div#pageMain to push it down below the fixed header. That margin collapses with div#pageWrapper and ultimately with the <body>.
Since the <body> is set to height:100% and the collapsing margin pushes it down 100px, the <body> ends up being 100px too tall and causes a vertical scrollbar in the browser. A height of 100% + 100px will always be greater than the window's height and will always require a scroll bar.
Below is an image showing the top of <body>. Note that it does not start at the top of the page as expected. It starts 100px down, below the header:
How to Fix the Collapsing Margin
There are several methods to prevent collapsing margins. In this context, I suggest changing the margin-top:100px on div#pageMain into padding:
#pageMain {
...
padding-top: 100px; /* padding instead of margin */
}
This stops the margin from collapsing and brings the <body> back up to the top of the window where it belongs:
Now the height of the <body> is 100% of the window and there is no persistent scroll bar.
See the demonstration below:
/* 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>
The answer by jlane09 also solves this issue. It has validity because it works. However, in my opinion, that answer does not adequately explain the cause of the problem. Also, using height:auto could cause further problems in some contexts (e.g. using percentage-based heights for child elements).
Sticky Footer
Creating a "sticky" footer is a separate issue. If you want the footer to always stick to the bottom of the window regardless of whether the window needs to scroll, see Ryan Fait's (famous) sticky footer. It requires somewhat of a different structure, but it's worth it.
I built you a rudimentary demo, below:
/* 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>
这篇关于页面底部的 CSS 空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
