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
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
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
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
body elements have a
height of 100%. To do this,
replace the existing CSS with the following:
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.
Setting the Margins to Zero
The final step is to set the margins on the
div elements to 0. Add the
last remaining style rule that takes care of that:
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,
html elements to 100%. Let's
answer the two most pressing questions you may have about
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.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.