How to expand a side nav <div> to full height

This is a discussion on "How to expand a side nav <div> to full height" within the Web Page Design section. This forum, and the thread "How to expand a side nav <div> to full height are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Jan 16th, 2008, 10:24
Up'n'Coming Member
Join Date: Mar 2006
Location: UK
Posts: 97
Thanks: 0
Thanked 0 Times in 0 Posts
How to expand a side nav <div> to full height

I'm sure this has been asked a hundred times, but just can't find the simple answer.

My vertical list navigation is inside a <div> called 'sidenav'. It only expands to accomodate the nav content but I want it to expand to the full height of my container.

Have tried height at 100% but no joy.
Anyone help?
Reply With Quote

  #2 (permalink)  
Old Jan 16th, 2008, 10:28
welshstew's Avatar
Lead Administrator

SuperMember
Join Date: May 2007
Location: inside the outside
Posts: 1,432
Blog Entries: 13
Thanks: 1
Thanked 17 Times in 15 Posts
Re: How to expand a side nav <div> to full height

try this tutorial on faux columns
__________________
WelshStew
Lead Administrator

tierney rides tboard - uk site | xtreme wales - extreme clothing
If you think I've helped, click the "Thanks"
webforumz - facebook | LinkedIn
Last Blog Entry: Web Standards Curriculum Launched (Jul 8th, 2008)
Reply With Quote
  #3 (permalink)  
Old Jan 16th, 2008, 17:55
JustinStudios's Avatar
SuperMember

SuperMember
Join Date: Mar 2007
Location: USA
Posts: 404
Blog Entries: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to expand a side nav <div> to full height

Height for some reason seems to be the worst thing in the world to code for, when it should be really simple. Can't wait till they get a fix for this in later years to come, but until now we have faux columns. These columns are actually background images that repeat and make it appear that your column actually goes down the full page.
Reply With Quote
  #4 (permalink)  
Old Jan 17th, 2008, 21:33
Up'n'Coming Member
Join Date: Mar 2006
Location: UK
Posts: 97
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to expand a side nav <div> to full height

Yup, that seems to work now. Great stuff!
It seems a bit of a cronky way to get it to work but work it does!!

Had to rethink my site layout but that was probably a good thing as it was getting a bit messy.

Cheers for your help.
Reply With Quote
  #5 (permalink)  
Old Jan 17th, 2008, 21:36
Up'n'Coming Member
Join Date: Mar 2006
Location: UK
Posts: 97
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to expand a side nav <div> to full height

Just one more thing on this. Not sure if I should post a new topic here??
I have a div with an address/image in that I want to anchor permanently at the very bottom of my side navigation panel no matter how far it expands to accomodate main body content. Have tried
<code>vertical-align:bottom </code>
and <code>vertical-align:baseline</code> but to no avail.

Can you help?

Last edited by snappy; Jan 17th, 2008 at 21:38. Reason: clarify my question
Reply With Quote
  #6 (permalink)  
Old Jan 18th, 2008, 16:29
Junior Member
Join Date: Jan 2008
Location: Northern Ireland
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to expand a side nav <div> to full height

Maybe put the div inside the navigation div and align it to the bottom?
Reply With Quote
  #7 (permalink)  
Old Jan 18th, 2008, 17:11
welshstew's Avatar
Lead Administrator

SuperMember
Join Date: May 2007
Location: inside the outside
Posts: 1,432
Blog Entries: 13
Thanks: 1
Thanked 17 Times in 15 Posts
Re: How to expand a side nav <div> to full height

try Ryan Fait's sticky footer
__________________
WelshStew
Lead Administrator

tierney rides tboard - uk site | xtreme wales - extreme clothing
If you think I've helped, click the "Thanks"
webforumz - facebook | LinkedIn
Last Blog Entry: Web Standards Curriculum Launched (Jul 8th, 2008)
Reply With Quote
  #8 (permalink)  
Old Jan 18th, 2008, 23:09
Up'n'Coming Member
Join Date: Mar 2006
Location: UK
Posts: 97
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How to expand a side nav <div> to full height

FXD: you'd think wouldn't you? tried that tho. and no joy
stew: can't believe there's no simple css for this, will have a go at Ryan's way and report back.

over and out....
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to make a table height equal to the browser height ? subhadip Starting Out 4 Sep 20th, 2007 07:56
Flash player - Expand Videos to Full Screen marcusanthony Flash & Multimedia Forum 2 Jun 10th, 2007 18:54
pictures side by side thisandthat Web Page Design 3 May 16th, 2006 00:36
Client-Side VS Server Side Scripting redev2006 JavaScript Forum 1 Jul 30th, 2005 19:30


All times are GMT. The time now is 16:24.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43