body height not filling 100% page height

Question

I can't figure this one out. I've got a simple set of divs with a header, sidebar and content area. The header is full width, the side and content are floated left.

I need the sidebar (for the background) to fill 100% of the page height, but when I inspect element in chrome, the <body> is actually ending long before the bottom of the page, which seems to be limiting the height of my sidebar.

What is keeping the <body> from filling the full page here?

    <body>
    <div id="head">
    </div>
<div id="sidebar">
    <div>
        <div id="menu">
            <ul>
                <li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a>
                </li>
                <li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/users">Manage users</a></li>
                        <li><a href="/users/add.php">Add a user</a></li>
                    </ul>
                </li>

                <li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/client_orgs">Manage clients</a></li>
                        <li><a href="/client_orgs/add.php" class="admin">Add a client</a></li>
                    </ul>
                </li>


                <li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a>
                    <ul class="submenu" style="display: none;">
                        <li><a href="/projects">Manage projects</a></li>
                        <li><a href="/projects/add.php" class="admin">Create a project</a></li>
                        <li></li>
                        <li><a href="/projects/submitted.php" class="admin client">Submitted projects</a></li>
                        <li><a href="/projects/closed.php" class="admin">Closed projects</a></li>
                    </ul>
                </li>
                <li class=""><a href="/my_account"><img src="/img/blank.png" alt="home" id="account_ico">Account</a>
                </li>
                <li class="active"><a href="/help.php"><img src="/img/blank.png" alt="help" id="help_ico">Help</a>
                </li>
            </ul>

        </div>
    </div>
</div>    
<div id="body" class="full">
  <div id="content">

    <!--start block-->
    <div class="block">
        <h1><img src="/img/blank.png" alt="home" id="help_ico"> Help</h1>
        <p>
        Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.
        </p>
    </div>  
</div>   
</body>

CSS:

* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 160%;
    position: relative;
    background: #000;
}
#sidebar{
    width: 200px;
    background: #000;
    height: 100%;
    padding-top: 30px;
    -webkit-box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);
        box-shadow: inset -4px 0px 8px 0px rgba(0, 0, 0, 0.5);
     float: left;
}
#body{
    float: left;
    padding: 30px 0 30px 40px;
    width: 75%;
}

Helpful? http://stackoverflow.com/questions/1622027/percentage-height-html-5-css — Will Richardson, Nov 11 '12 at 00:44

score 74 · Accepted Answer · edited Oct 13 '20 at 07:04

74

Looks like you have float:left applied on your children. Use this code :

html, body {
    overflow: auto;
}

edited Oct 13 '20 at 07:04

Ahmed Ashour

5,179
10
35
56

answered Dec 27 '13 at 21:20

Tim Nguyen

1,163
10
21

1

I have the same problem; its so annoying.. I tried the overflow but it did not work... Can you take a look http://omarhabash.com/wp/?page_id=54. – Omar Feb 09 '15 at 00:26
7

You should have a gold medal for this answer, I was searching for ages! Thanks. – Ondrej Tokar Nov 22 '15 at 21:03
2

This has made inner scroll bars appear! – naomi Dec 13 '18 at 14:57

score 24 · Answer 2 · answered Aug 21 '19 at 08:19

24

Please use this answer wisely, I't could help in many cases:

html, body{min-height:100%;}
body{height:100vh;}

answered Aug 21 '19 at 08:19

mohammed Suleiman

471
4
4

1

Thanks worked fine for me but can you tell what is VH? – Mohammad Ghonchesefidi Aug 29 '19 at 06:44
2

VH means: View port Height. Each (1vh) = (1%) from the view port height. Link below will explain it very well: https://www.sitepoint.com/css-viewport-units-quick-start/ – mohammed Suleiman Sep 22 '19 at 12:01

score 11 · Answer 3 · answered Nov 11 '12 at 00:48

11

try adding

body {
  min-height: 100%;
}

answered Nov 11 '12 at 00:48

Hussein Negm

551
5
17

score 9 · Answer 4 · answered Jul 30 '13 at 19:22

9

When in doubt - the best way I found to tackle this is by adding:

html { overflow-y:scroll; }

answered Jul 30 '13 at 19:22

Erick

99
1
3

score 6 · Answer 5 · answered Aug 25 '17 at 18:56

6

Not sure if this will help anyone but I had the same problem but only on mobile. I discovered that there was a style html { height: 100%; } that was causing the body to not extend the full height. Once I removed the 100% height on the html tag it fixed the body not extending the full height of the page on mobile. I still have 100% height on the body tag.

answered Aug 25 '17 at 18:56

lflores

3,770
3
19
24

1

That was it for me, I don't know how it works, but I think the height of `html` was being constrained by the window viewport size on first load of the page. – inostia Dec 17 '18 at 22:58
This worked for me too. Great! – Bidisha Das Nov 02 '21 at 05:11
Rather the opposite worked for me - I had to apply and it worked... – shanti Nov 25 '21 at 12:46

score 3 · Answer 6 · answered Nov 11 '12 at 01:12

3

You seem to be trying to achieve a layout which spans the entire height of the container - these layouts are not posible. You should read up on the Faux Columns CSS technique, a common workaround to this problem.

answered Nov 11 '12 at 01:12

Wex

15,539
10
64
107

score 2 · Answer 7 · edited May 23 '17 at 12:34

2

There are two problems:

First:
The width of your elements is greater than 100% of the width of the page
This is why your div id="body" is getting stuck below the sidebar.

Try making the width of the body something like 30% and you should see what I mean.

Second:
height:100% does not really work the way it would seem there are workarounds for this.
Here is a great solution

edited May 23 '17 at 12:34

Community

1
1

answered Nov 11 '12 at 00:57

Malkus

3,686
2
24
39

I tried that, putting a clear inside the body and inside the `content` div and inside the `body` div and it had no effect – TH1981 Nov 11 '12 at 01:03
I had a chance to take a closer look at your code and updated my answer. take a look at let me know if that works for you. – Malkus Nov 11 '12 at 01:22

score 0 · Answer 8 · answered May 11 '22 at 15:22

0

For me, I had to add margin-bottom: -2em to the container in my SPA where backend + frontend files meet

answered May 11 '22 at 15:22

Dazzle

2,880
3
25
52

body height not filling 100% page height

8 Answers8