HTML first section take up whole page

Question

I'm trying to get the first initial first section to take up the whole height of the page. I've tried this question here: Making a div fit the initial screen but I cannot get it to work, everything just overlaps.

My nav bar is centered on the first section and will stick to the top when the page is scrolled, I just need the first part to take up the whole page.

Like this:

enter image description here

Spotify also do it on their website

My HTML: Title

    <body>

    <span id="top"></span>


        <div id="floater"></div>
        <div id="centered">
        <div id="sticky_navigation_wrapper">
            <div id="sticky_navigation">
               <div class="navbar">
                    <a class="navbar" href="#about">about</a>   <a class="navbar" href="#portfolio">portfolio</a>   <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a>  <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a>
            </div>
        </div>
   </div>
   </div>
   <div>
   <a>Random Text here, blah blah blah!</a>
   </div> 
   </body>

My CSS

html,body{
    border: 0;
    margin: 0;
    padding: 0;
    height:100%;
    width:100%;
}

#floater {
    position:relative; float:left;
    height:50%; margin-bottom:-25px;
    width:1px;
}

#centered {
    position:relative; clear:left;
    height:50px;
    margin:0 auto;
}

#sticky_navigation_wrapper { 
width:100%; height:50px; 
}

#sticky_navigation { 
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; 
}

possible duplicate of [How to make the web page height to fit screen height](http://stackoverflow.com/questions/11868474/how-to-make-the-web-page-height-to-fit-screen-height) — Joe, Jul 21 '13 at 14:37

score 0 · Answer 1 · answered Jul 21 '13 at 14:53

I do this to my webpages all the time. Just add a containing div with the position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; style. That should give you a shade like area to cover the whole webpage. You can then put whatever you want inside that div.

To center vertically, do a little math and use a div. Thus, if the height of your div is going to be 400px then make the position: fixed again with the same specifications above, except change the top to 50% and then margin-top a negative value to half of the height. So, in this case it would be margin-top: -200px;

<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :)
</div>
</div>

and then for your navigation bar after you get passed the first layer, put that on position: fixed; as well, just make sure it is above the code given above. That way, it appears on the bottom.

<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div> 
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->

I didn't try your solution but it sounds like it would work too, thank you heaps :) — Jacob Wood, Jul 22 '13 at 02:37

score 0 · Accepted Answer · answered Jul 21 '13 at 15:00

I think the best solution, which I use on sites like this, would be to wrap each section in a containing div (or , if all your target browsers support it or you don't mind using a html5 shiv).

like so

<div class="section">
  <p>Hello World</p>
</div>

<div class="section">
  <p>Hello World</p>
</div>

You can then give that div height: 100% and width: 100% like...

.section{
  height: 100%;
  width: 100%;
}

You can see it all put together in this jsfiddle: http://jsfiddle.net/Ucetz/

score 0 · Answer 3 · answered Apr 12 '16 at 18:44

0

Be sure to include height: 100% in the style for the HTML and BODY tags. Then set the height of the sections.

answered Apr 12 '16 at 18:44

J Burks

1

score 0 · Answer 4 · answered May 11 '20 at 14:00

Use Viewport Height. Set the height of your div (also works with section) to whatever percentage you want your div to fill up the screen.

.section_div {
   /* fill up 85% of screen heigth */
   height: 85vh;

   /* fill up 100% of screen width */
   width: 100vw;

   /* you can also use min-height instead of height. */
}

HTML first section take up whole page

4 Answers4