CSS White Space At Bottom Of Page
How can I get rid of the space at the bottom of the page?
Solution 1:
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>Solution 2:
It's because you have height: 100%; on your html and body tags. Also, it is on your pageWrapper class. This tells the browser to make the height of the page at least the height of the viewport no matter what, and then tells your inner pageWrapper class to match that height, no matter what.
I would suggest making html height: auto; for a start.
Solution 3:
The div class "question" is 2032 pixels tall. Underneath this div is one called "answer" that is a blank div that is 728 X 870px. The white space can be eliminated by shrinking the answer div to eliminate some of the white space. However some white space is because of the answer area. To learn how to change the CSS visit http://www.w3schools.com/cssref/pr_dim_height.asp. The code to find these divs are under body, container, content, itemscope, and then mainbar.
Solution 4:
I fixed it by removing line-height:100% from your body.
Add height:100vh to you #mainPage.
#mainPage{
height:100vh;
}
Solution 5:
I think maybe you intended the black background footer section to reside at the bottom with no white space beneath, right? You can do that by taking the footer section out of the page wrapper, put it right before the end body tag and add this css:
For ID pageFooter add 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>
Post a Comment for "CSS White Space At Bottom Of Page"