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: 0px0px0px0px;
}
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: 30px30px30px0;
padding: 00020px;
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: #ffffffurl(../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: #262626url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebarh1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebarh1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebarh1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNavli: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;
}<divid="pageWrapper"><divid="pageTop"><divid="topTitle">
This is where the pages logo/title/whatever will go.
</div><divid="topRight">
Rightside content
</div></div><divclass="clearBoth"></div><divid="pageMain"><divid="mainContent"><divclass="contentClear"><divclass="contentPost"><divclass="postTitle"><h1>HELLO WORLD!</h1></div><divclass="postExtras"><p>
APRIL 2, 2015 1 COMMENT
</p></div><divclass="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><divid="mainSidebar"><divclass="sidebarContent"><h1>Navigation</h1><ulclass="sidebarNav"><li><ahref="_blank">Home</a></li><li><ahref="_blank">About</a></li><li><ahref="_blank">Contact</a></li><li><ahref="_blank">Links</a></li></ul></div><divclass="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><divclass="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><divclass="clearBoth"></div><divid="pageFooter"><divid="footerContent"><h1>This is the footer, and copyright stuff.</h1><ul><li><ahref="_blank">Home</a></li><li><ahref="_blank">About</a></li><li><ahref="_blank">Contact</a></li><li><ahref="_blank">Links</a></li></ul></div><divid="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: 00 -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: #ffffffurl(../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: #262626url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebarh1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebarh1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebarh1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNavli: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 */
}<divid="pageWrapper"><divid="pageTop"><divid="topTitle">This is where the pages logo/title/whatever will go.</div><divid="topRight">Rightside content</div></div><divid="pageMain"class="clearfix"><divid="mainContent"><divclass="contentClear"><divclass="contentPost"><divclass="postTitle"><h1>HELLO WORLD!</h1></div><divclass="postExtras"><p>APRIL 2, 2015 1 COMMENT</p></div><divclass="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><divid="mainSidebar"><divclass="sidebarContent"><h1>Navigation</h1><ulclass="sidebarNav"><li><ahref="_blank">Home</a></li><li><ahref="_blank">About</a></li><li><ahref="_blank">Contact</a></li><li><ahref="_blank">Links</a></li></ul></div><divclass="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><divclass="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><divid="footer_push"></div></div><divid="pageFooter"><divid="footerContent"><h1>This is the footer, and copyright stuff.</h1><ul><li><ahref="_blank">Home</a></li><li><ahref="_blank">About</a></li><li><ahref="_blank">Contact</a></li><li><ahref="_blank">Links</a></li></ul></div><divid="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: 0px0px0px0px;
}
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: 30px30px30px0;
padding: 00020px;
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: #ffffffurl(../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: #262626url(../style/images/sidebarBackground.gif) repeat-y right;
color: #CCCCCC;
width: 220px;
margin: 15px;
height: 100%;
float: right;
}
#mainSidebarh1 {
color: #CCCCCC;
font: 14pt'Roboto', sans-serif;
text-align: center;
margin: 2px;
padding: 2px;
}
#mainSidebarh1:before {
content: "‹";
position: relative;
left: -2px;
}
#mainSidebarh1:after {
content: "›";
position: relative;
left: 2px;
}
.sidebarContent {} .sidebarNav {
margin: 0;
padding: 0;
list-style: none;
}
.sidebarNavli: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;
}
#footerContenth1 {
position: absolute;
right: 40%;
font-size: 12px;
color: #ccc;
}
#footerContentul {
padding: 0;
margin: 0;
margin-left: 20px;
}
#footerContentulli {
display: inline;
line-height: 40px;
}
/* ADD THIS TO FIX FOOTER TO BOTTOM */#pageFooter {
position: fixed;
bottom: 0;
}<divid="pageWrapper"><divid="pageTop"><divid="topTitle">
This is where the pages logo/title/whatever will go.
</div><divid="topRight">
Rightside content
</div></div><divclass="clearBoth"></div><divid="pageMain"><divid="mainContent"><divclass="contentClear"><divclass="contentPost"><divclass="postTitle"><h1>HELLO WORLD!</h1></div><divclass="postExtras"><p>
APRIL 2, 2015 1 COMMENT
</p></div><divclass="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><divid="mainSidebar"><divclass="sidebarContent"><h1>Navigation</h1><ulclass="sidebarNav"><li><ahref="_blank">Home</a></li><li><ahref="_blank">About</a></li><li><ahref="_blank">Contact</a></li><li><ahref="_blank">Links</a></li></ul></div><divclass="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><divclass="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><divclass="clearBoth"></div><divid="pageFooter"><divid="footerContent"><h1>FIXED FOOTER ©2015 etc.</h1><ul><li><ahref="_blank">Home</a></li><li><ahref="_blank">About</a></li><li><ahref="_blank">Contact</a></li><li><ahref="_blank">Links</a></li></ul></div><divid="footerRight"><p>
SMLinks
</p></div></div></div>
Post a Comment for "Css White Space At Bottom Of Page"