1

I'm struggling with the following. My index page is made out of 3 divisions. A header div (not showing on the screenshot), a menu div (left-side on the screenshot) and a content container div (right-side on the screenshot).

As you can see, the menu divs background doesn't fill the height of the screen vertically. This is my code of the menu div. The div also contains a list but I don't think this is necessary to fix this.

#menucontainer {
    float:left;
    width:200px;
    background-color:#dddddd;
    position:absolute;
    height:100%;
    overflow:hidden;
}

Could someone please help me with what I am doing wrong. I think its just a little thing but I can't find it.

Thanks!

donald123
  • 5,638
  • 3
  • 26
  • 23
Oellemans
  • 136
  • 11
  • height : 100% wont do.. try pixel / post a fiddle – Developer Nov 18 '14 at 10:35
  • 2
    100% height means the same height as the parent element, not the height of the window. So, what is the height of the parent? – Mr Lister Nov 18 '14 at 10:38
  • Try `position: fixed;` with `height: 100%` for `#menucontainer` – dfsq Nov 18 '14 at 10:39
  • `float` and `position:absolute` don't go together. – Abhitalks Nov 18 '14 at 10:40
  • @MrLister The parent element gets loaded in by jQuery and doesn't contains a height, some elements are smaller and then everything works fine, of course. The height of those parent elements depends on how many text or forms they have on their page. – Oellemans Nov 18 '14 at 10:41
  • The background color **IS** filling the full height of that `DIV`, the problem you have is related to the `height` of that `DIV` that's not actually the one you expected. As you have some `float` in your `CSS`, you will probably need to add an empty `DIV` with `clear:both` at the end, before the closing tag of the container. If you give us the `HTML` code or an `jsfiddle` example, will be more easy to help you better. – gmo Nov 18 '14 at 10:44
  • @dfsq Like I said, there's and header above the menu. So if I make the position fixed, i'll get an ugly white space above mine menu. – Oellemans Nov 18 '14 at 10:44
  • @gmo It's a little bit to much to put in jFiddle, because to let you show this, it contains like 5 documents. It depends on computers. I've a resolution of 1280*1024 but on pc's with an higher resolution it works... – Oellemans Nov 18 '14 at 10:49
  • Just be concise, try to extract only the relevant part. We will try to help you to understand it on how it's done and how to use it, not fix your real code. (So you can be able to *do it your self* in the future.) – gmo Nov 18 '14 at 12:24

3 Answers3

0

Try this :

#menucontainer {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  margin-top: -2.5em;
  background-color:#dddddd;
}
BobyCode
  • 58
  • 6
  • Thanks for commenting, but unfortunately this doesn't fix the problem. When i'm doing this, it only gives the background until the end of the list inside the menu and it overlaps the header – Oellemans Nov 18 '14 at 10:59
  • 1
    Try to use Javascript so – BobyCode Nov 18 '14 at 11:07
0
#menucontainer {
    float:left;
    width:200px;
    top:0;
    left:0;
    background-color:#dddddd;
    position:absolute;
    height:100%;
    overflow:hidden;
}
Hussy Borad
  • 626
  • 5
  • 20
0

In Javascript :

<script type="text/javascript">
   // allocate the function to the window scrolling
   window.onscroll = menucontainer;

   var startingY = false;

   function menucontainer() {

       // First top value recovery
       if (!startingY) startingY = parseInt(document.getElementById("menucontainer").style.top);

       // Scroll top value
       if (window.pageYOffset) {        
           var yrt = window.pageYOffset;
       } else if (document.body.scrollTop){
           var yrt = document.body.scrollTop;
       } else {
           var yrt = document.documentElement.scrollTop;
       }

       document.getElementById("menucontainer").style.top = (yrt + startingY)+ "px";
   }
</script>

and

<div id="menucontainer">
...
</div>
BobyCode
  • 58
  • 6