How can I get a left-navigation column to fill the entire left side of the middle of a webpage using CSS?


Tags: css

Problem :

I'm working on making this web page:

http://jsfiddle.net/pW8yj/

and I want to get a left navigation area to extend all the way down the left side, from the bottom of the header to the top of the footer. I tried setting height: 100% but that didn't seem to work. Is there something I'm doing wrong here?



Solution :

This will never work the way you're expecting it to. You cannot set a 100% height to the element as it will go to 100% of its content, not the height of its parent container.

What I recommend doing is removing the background from the leftNAv area, and instead, set a repeating background on div id="middleArea" with the grey part as repeat-y. that way, no matter how big the #middleArea gets, the background will expand regardless.

You can try resources like Faux Columns which may give you the templates and other results you're looking for:

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

Cheers.


    CSS Howto..

    How to convert html & css to an image?

    My dropdown menu isn't showing below parent

    IcoMoon App icon fonts are shown as 

    how to compute Facebook graph api cover offset_y to pixel?

    How can I add a css property to the first div with a specific class name?

    How to apply CSS style to a Sibling Label field of a Div?

    How to minify and combine commented out css files

    How to keep top of element static while bottom is dynamic. -CSS

    How can I disable the color defined in an previously defined CSS class

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How should I do this in CSS?

    how should i set scrollbar properties in css

    How I can add td to css style for inputs and its label?

    how change css href to all .html documents with button click?

    How to work with boxes? Html Css

    How can I get rid of these shadows on my text in Internet Explorer?

    How can I add my custom style for my bootstrap navbar?

    How to create a Vertical Strikethrough in CSS?

    myFlowPanel has many childFlowPanels, so how to create the same margin for all childFlowPanels without using marginTop on childFlowPanels (GWT)?

    how to change the css of default select2 placeholder color?

    Android WebView : how do I control webView height?

    How to find absolute path to @font-face fonts with Firebug?

    How to find out and get rid of unused CSS code? [closed]

    How to redirect using css? [duplicate]

    How to make a “” looks like a link with CSS?

    How to make an svg masked image compatible with Internet Explorer

    How to inject css in another page

    How to print javascript within HTML id tag

    How to change the color of item selection radcombobox with a css style?

    How to edit the CSS of a selector in Polymer 1.0