Make menu height = 100% – CSS

[KnightMaire]

My friend asked me to help him get a navigation menu to be dynamic in height depending on the amount of text is in the content div. I took a look at it and cannot figure out for the life of me how to get the size of the nav to stay even in height with the content div. This is for college and is due tomorrow i think, can you help?

The HTML and CSS can be found below:

CSS: http://pastebin.com/pycDW9rn
HTML: http://pastebin.com/L3dB7Wuy

Thanks!

[wolfcry911]

you need to clarify.

[dfogge]

would you mind making a jsfiddle? it would be much easier to pin point the issue that way. thanks

[theacefes]

http://jsfiddle.net/a3V56/

I made one so we can assist faster. :)

[dfogge]

thanks aces ;)

so @KnightMaire, are you saying you want the grey to extend all the way down?

[KnightMaire]

@dfogge yes, exactly, always 100% no matter how far the main-content’s text goes down

[wolfcry911]

the simplest way is to make the background in #main the same as the nav

[KnightMaire]

@woldcry911 i only changed the colors so I could easily see where the div starts/stops

[wolfcry911]

yes, but it’s still true – a very common method is faux columns. Just apply the background (color or image) to the container (or in this case #main) to give the illusion of full height column.

[mallik]

Are you looking for this

http://jsfiddle.net/a3V56/7/

[Author]

Posts