Why does my div not extend to the full length of the page despite my adding height: 100%?

Question

So, I have a sidebar that I want to extend all the way down my page (exactly as far as the content). I set the height of the sidebar to 100%, but unfortunately it's only going as far as about the middle of the content div. I've researched my question here on StackOverflow and found several answers, nearly all of them having answers such as doing

html, body{ height: 100%; }

and then setting the sidebar's height to 100% as well. None of the solutions have worked for me, so I'm getting the feeling that this is an actual problem with the code. Here is what I currently have.

How would I fix the problem and make the height of the sidebar the full height of the page? (I'd prefer pure HTML/CSS, but if you have a suitable JS answer please provide it. Anything that works.) Thanks in advance!

CSS3's `height: 100vh;` would likely do what you want, or maybe something like `height:calc(100vh - 2em)` to give it some room if you don't want it quite the full height.. — dandavis, Jul 13 '15 at 06:52
Not exactly, I don't want the sidebar to be fixed in one position. It should be able to scroll down with the page. And I'd like the sidebar to be aligned with the content. @dandavis I tried it, it didn't change. — , Jul 13 '15 at 06:57
@dandavis Setting the height to `100vh` (or any similar variation) would still result in a static height (of a sort). The sidebar would always be relational to the viewport, **not** the content of the main section. — David Mann, Jul 13 '15 at 08:27

score 1 · Answer 1 · answered Jul 13 '15 at 06:52

1

I guess that height:100% does these two thinks. First it set the height to 100% height of parent element. And because your body html element is as high as your screen height, then the height stays as screen height.

You can fix it by either setting position:fixed as proposed by @Julo0sS or calculate the height in javascript and update the style attribute. But I would say that setting position:fixed is easier and sufficient.

answered Jul 13 '15 at 06:52

David Votrubec

3,968
3
33
44

if you give the container relative pos, then abs pos+100% on the inner will work fine, no need for fixed, which has a lot of side-effects, especially on mobile. – dandavis Jul 13 '15 at 06:56

Barr J · Answer 2 · 2015-07-13T06:56:39.867

1

This is what you have to do:

CSS:

#leftbar{
text-shadow: 1px 1px 10px gray;
position: absolute;
top: 100px;
left: 100px;
max-width: 195px;
background-color: yellow;
color: black; 
height:1100px (or 166%);
border-radius: 25px;
}

HTML:

<html>
    <body>
<div id = "leftbar">

Just set the height according to px.

edited Jul 13 '15 at 06:56

answered Jul 13 '15 at 06:53

Barr J

10,636
1
28
46

Doesn't this just set the height to 1100 px? Thats not the same as 100% – Eric Herlitz Jul 13 '15 at 06:54
Right, but if he wants precent it has to be higher then 100%. – Barr J Jul 13 '15 at 06:57
What happens if his content doesn't extend to exactly 166%? Wouldn't that break the effect the OP is going for? – David Mann Jul 13 '15 at 08:34
But in the other hand, the content div is 166%. thing is that, this div will expand as words will be added. One way to solve this is using Table. The other is CSS 3. It's the programmers decision here. – Barr J Jul 13 '15 at 09:57

David Mann · Accepted Answer · 2015-07-13T11:20:18.497

You can achieve the effect you want using display: flex. By default flexbox sets it's children to fill its height, which happens to be whatever the tallest child is (if no height has been set on the flex container, of course). It has fairly decent support and lots of good tutorials. I find myself using Chris Coyiers css-tricks snippit on flexbox fairly often. There are two ways you could replicate your fiddle. Either set body to display: flex and use padding to get #leftbar and #content where you want them, or you can place them in a wrapper with display: flex and absolutely position it instead. I chose the latter method. Here's the code:

#leftbar{
text-shadow: 1px 1px 10px gray;
max-width: 195px;
background-color: yellow;
color: black; 
border-radius: 25px;
}
#content{
    border-radius: 25px; 
    background-color: red; 
}

#wrapper {
  display: flex;
  position: absolute;
top: 100px;
left: 100px;
}

<div id="wrapper">
  <div id="leftbar">
    <h2>Site Navigation</h2>
  </div>
  <div id="content">
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
  </div>
</div>

Hopefully this helps!

jaunt · Answer 4 · 2015-07-13T07:16:26.153

0

It's time for a table! If you don't want to specifically define a height, and you want multiple children to have the same height, then what you need is a table. Take a look at this:

#wrapper{
  display:table;
  position: absolute;
  top: 100px;
  left: 100px;
}
#leftbar{
  text-shadow: 1px 1px 10px gray;
  max-width: 195px;
  background-color: yellow;
  color: black; 
  border-radius: 25px;
}
#content{
  border-radius: 25px; 
  background-color: red; 
}

<table id="wrapper">
  <td id="leftbar">
    <h2>Site Navigation</h2> 
  </td>   
  <td id="content">
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
  </td>
</table>

Granted this does change your mark-up, but if you want a pure CSS solution, a table is the answer.

Oh and it's worth pointing out I took a few sneaky shortcuts here. If you inspect the elements, you'll notice that your web browser has added the <tbody> and <tr> elements for us. The only problem with this is that the content elements are no longer direct children of #wrapper. It's only a minor problem though, there are plenty of workarounds if you want to get the children of wrapper and get #leftbar and #content.

edited Jul 13 '15 at 07:16

answered Jul 13 '15 at 07:09

jaunt

4,978
4
33
54

The right approach nowadays, is not to work with tables any more as you work with divs and spans, and use the 'display:inline' attribute. Table is an old fashioned approach rarely used nowadays. – Barr J Jul 13 '15 at 07:34
1

Yes very true, however tables offer all the required styling without all the CSS, which is why I'm using it in the case. If I used `div`s and `span`s the mark-up would be huge. Tables are better than them in this case, so why not use them? It works, and the OP had no specific requirements about caching or whatnot. You are correct, but they are still used and if they weren't there would be no support for them. If anyone is interested in this further I found a great answer at this [link](http://stackoverflow.com/a/84986/4907552) which describes the pros and cons of tables. – jaunt Jul 13 '15 at 07:42
Instead of literally using tables you could just use `display: table` instead. Just add `display: table` to `#wrapper` that you added (making it a `div` or some other element instead) and `display: table-cell` on `#leftbar` and `#content` (once again restoring them as `div`s). This would get the exact same effect. Or you could just use `display: flex` as I did in my [answer](http://stackoverflow.com/a/31378218/2591007). – David Mann Jul 13 '15 at 08:08
Both the `display: flex` and table solutions work perfectly for me. Just a little doubt: Why must we define a `#wrapper` div to contain the content and have the positioning code in the wrapper? Isn't it the content that's supposed to be styled? – Jul 13 '15 at 18:19
Not necessarily. It's always good to try to add as little markup to your html as possible, but if it makes things too complicated to style or to maintain then it's perfectly fine to add a div here or there. In fact, if you want to get technical, you can use a more semantic name than `div#wrapper`. For instance, you could use `main` instead. Then your html would reflect that the content inside is the main content for the page--often everything but your header and footer. – David Mann Jul 13 '15 at 19:44
Thanks. By the way, I just noticed in this answer that the `
` element "Site Navigation" was pushed down quite a bit. How would I keep the element at the same height as in your answer?
– Jul 14 '15 at 00:11

Why does my div not extend to the full length of the page despite my adding height: 100%?

4 Answers4

` element "Site Navigation" was pushed down quite a bit. How would I keep the element at the same height as in your answer?