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:
[ 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!
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!
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:
[ 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.
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!
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.
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.
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.
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.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|
