Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gabriel Ward
20,222 PointsHow do I make the body element fill 100% of the browser?
I want to make the body fill 100% of the broswer window so that the footer isn't immediately visible on pages with a small amount of content.
I've tried
body {
height: 100%;
}
but no luck.
4 Answers
Greg Kaleka
39,021 PointsI've tackled this by using style tags and a media query, and pinning the footer to the bottom of the window if the viewport height is larger than my content. You could put this right in your css. I only include this on certain pages, so it made sense to use style tags like this.
<style media="screen" type="text/css">
@media (min-height: 503px) {
footer {
position: fixed;
bottom: 0;
width: 100%;
}
}
</style>
Ryan Field
Courses Plus Student 21,242 PointsIf you don't mind a fixed height for your footer, then this page has a pretty good solution.
Marcus Parsons
15,719 PointsGotta love CSS tricks!
Ryan Field
Courses Plus Student 21,242 PointsSeriously. Every time I search for something and I see a link there, I immediately click through! XD
Marcus Parsons
15,719 PointsYes! It reminds me more and more that I'm evidently still learning the power of CSS! lol
Marcus Parsons
15,719 PointsHey Gabriel,
Try targeting html and body together:
html, body {
height: 100%;
}
Gabriel Ward
20,222 PointsHi Marcus,
I've tried that already and no luck. Here's my html. Correct me if I'm wrong, but my body and footer elements are positioned correctly in the html?
<!DOCTYPE html>
<!-- THIS IS THE HOMEPAGE -->
<html>
<head>
<title>HBKB</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/style.css">
</head>
<header class="main-header">
<div class="main-nav">
<ul>
<li><a href="aboutPage.html">About</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="#">Contribute</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>
<div class="byline">
<img class='main-logo' src="img/HBDA_logo.png"></img>
<h1>The Hawke's Bay Knowledge Bank</h1>
<h3>A living record of Hawke's Bay and its people</h3>
</div>
</header>
<body>
<div class="menu">
<nav id="nav-main">
<ul>
<li class='navMainItems'><a href="index.html">Home</a></li>
<li class='navMainItems'><a href="publicationsSubjects.html">Publications</a></li>
<li class='navMainItems'><a href="peoplePage.html">People</a></li>
<li class='navMainItems'><a href="imageSubjectsPage.html">Images</a></li>
<li class='navMainItems'><a href="maps.html">Maps</a></li>
<li class='navMainItems'><a href="projectsList.html">Projects</a></li>
<li class='navMainItems'><a href="audio.html">Audio</a></li>
<li class='navMainItems'><a href="video.html">Video</a></li>
<li class='navMainItems'><a href="collectionsList.html">Collections</a></li>
<li class='advancedSearch'><a href="searchForm.html">Search</a></li>
</ul>
</nav>
<div id="nav-trigger">
<ul class='nav-secondary'>
<li><a href="index.html">Home</a></li>
<span>Menu</span>
<li><a href="searchForm.html">Search</a></li>
</ul>
</div>
<nav id="nav-mobile"></nav>
</div>
<div class="grid-container">
<div class="grid-4">
<img class="feat-img" src="img/natLib.jpg" />
<a href='publicationsSubjects.html'></a>
</div>
<div class="grid-4">
<a href='http://www.teara.govt.nz/'><img class="feat-img" src="img/teara.png" /></a>
</div>
<div class="grid-4">
<a href='http://www.nzhistory.net.nz/'><img class="feat-img" src="img/nzHist.png" /></a>
</div>
</div>
</body>
<footer class="main-footer">
<ul class='newsSubscribe'>
<li>Subscribe to our newsletter:</li>
<li>
<form>
<input class='search' type='text' placeholder='Enter your email...' 'required'>
<input class='button' type='button' value='Subscribe'>
</form>
</li>
</ul>
<div class='grid-container'>
<div class='grid-4 contactInfo'>
<ul>
<li><h3>Contact:</h3></li>
<li>Ph: (06) 833-5333</li>
</ul>
</div>
<div class='grid-4 contactInfo'>
<ul>
<li><h3>Opening Hours:</h3></li>
<li>10am to 5pm, Monday to Friday</li>
</ul>
</div>
<div class='grid-4 contactInfo'>
<ul>
<li><h3>Address:</h3></li>
<li>901 Omahu Road, Hastings</li>
</ul>
</div>
</div>
</footer>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src='js/stickyHeader.js'></script>
</html>
Marcus Parsons
15,719 PointsYour footer (and all of its containing elements) and the scripts should all be located within the body of the page. Right now, they exist outside the body.
Gabriel Ward
20,222 PointsHmm, that's what I actually had initially but thought I was going wrong. Still no luck!
Marcus Parsons
15,719 PointsIf you're working on this in Workspaces, a snapshot to your Workspace would be incredibly helpful for me to truly see your problem. http://www.teamtreehouse.com/forum/workspace-snapshots
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsThe only problem with having this fixed footer is that it will appear on top of other content if that content goes past the screen's height. Perhaps instead it should be absolutely positioned so that it can go to that place, but not interfere with any other content.
Greg Kaleka
39,021 PointsGreg Kaleka
39,021 PointsWell, the whole idea here is to put this on pages where scrolling won't be necessary (i.e. content doesn't reach the bottom of the page). You adjust the media query to ensure this.
If for some reason scrolling is necessary, I still think I'd rather have fixed than absolute positioning. With absolute positioning, the footer would move and other content would be below it. I can't imagine you'd want that behavior for a footer.
Here's an example.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsI meant relative, not absolute. Oops!
Greg Kaleka
39,021 PointsGreg Kaleka
39,021 PointsRelative takes us back to square 1. If the content is less than the height of the page, the footer sits right under it, not at the bottom of the page.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsYou're right. A relative footer only works if the content overflows the screen's height and is really useless for what I was saying anyways because you wouldn't even have to go through the trouble of using a relative position if the content overflows past that point.
The only viable solution that I can see that would ensure that the footer didn't overlap content would be to test via JavaScript if the page's content overflows the height of the screen. If it doesn't, apply the fixed positioning (and relevant styles), and if it does, leave the footer be.