Grabbing All Available Space

by kirupa  |  8 June 2011

  Have questions? Discuss this HTML 5 tutorial with others on the forums.

If you are trying to create something immersive that draws all of your users' attention, one good way to do that is by creating something awesome that takes up all available space:

screenshot from the Tron site

[ the tron legacy site takes up all available space...and more! ]

In this short tutorial, I won't cover how to create something awesome. What I will explain is what you will need to do to ensure your content takes up all available space!

Getting it Done
The basic approach to take for making something take up all available space is to ensure that your root div element has a width and height of 100%. While that may seem like all you need to do, you will need to also set the width and height of your body and html elements to be 100% as well. Beyond that, you will also need to ensure that margins on elements in your document are set to 0 as well. While some of these steps may seem weird, I will explain why shortly.

Since seeing is believing, let's first build a small example that does what we want. Take a look at the following HTML which consists of a simple div with a CSS style that gives it a light blue background color:

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Hello...</title>
<style>
#mainParent {
background-color: #E6F8FF;
}
</style>
</head>
<body>
<div id="mainParent">
</div>
</body>
</html>

If you preview your document right now, you won't see anything displayed. Don't worry - that is expected!

Setting the Width and Height to 100%
The first thing we are going to do is to ensure that our div is visible. This involves making sure that it and the html and body elements have a width and height of 100%. To do this, replace the existing CSS with the following:

<style>
html, body {
width: 100%;
height: 100%;
}
#mainParent {
background-color: #F1FAFE;
width: 100%;
height: 100%;
}
</style>

If you preview your page, you will see that your content is now mostly taking up space...but it isn't full there yet. There is still some gap between the edge of your browser and the rest of the page:

need to set margins to 0

[ the gap exists because margins are not 0 ]

We do not want the gap. The reason this gap exists is because the margins on the elements have not been set to 0. Let's do that next.

Setting the Margins to Zero
The final step is to set the margins on the html, body, and div elements to 0. Add the last remaining style rule that takes care of that:

<style>
html, body {
width: 100%;
height: 100%;
}
#mainParent {
background-color: #F1FAFE;
width: 100%;
height: 100%;
}
* {
margin: 0;
}
</style>

Once you have done this, if you save and preview your document, your content will now fully take up all available space without showing any gaps or scrollbars!

What Just Happened
In a nutshell, you were able to have your content take up all available space. The way you did that was by setting the margin for all elements to 0 and setting the width and height on your div, body, and html elements to 100%. Let's answer the two most pressing questions you may have about this.

Why set the Width and Height on body and html?
Setting width and height of your main div element to 100% makes a lot of sense, yet it may not make sense why you would do that for the parent body and html elements. The reason is that an element's minimum width and height is determined by its contents. the element's normal width and height is determined by its parents.

Because our div is completely empty, it's minimum width and height is actually 0. Since it has no content either, it is essentially invisible to the eye because it takes up no space. To address this, we simply had to walk up the tree and make every element all the way to the root have a width and height that was 100%. This is the reason why the body and html elements were involved.

Why set margins to 0?
Every element has a margin value that determines its distance from another element. By default, the margin is not zero. The default value varies between elements, but because the value isn't zero, a gap will always exist. Only by explicitly setting a margin of 0 do we ensure that all of the available space is taken up by our contents - and this includes the distance between your browser's edge and the content that results in a gap as well.

Conclusion
Well, that's all there is to making a div essentially take up all space on a page. Once you start adding elements and trying to do more complex things, you'll find that you'll have to start doing a little bit more to ensure that everything is properly positinioned. Hit up our forums if you find yourself getting stuck though.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.