CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old August 29th, 2003, 10:41 AM
icy_polecat's Avatar
icy_polecat icy_polecat is offline
Senior Polecat
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jun 2003
Location: Jersey (the original version)
Posts: 210 icy_polecat User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 59 m 57 sec
Reputation Power: 10
Send a message via Yahoo to icy_polecat
CSS Divs stretching to 100% height

or not!

Could people have a look at my site and let me know how I can get the div on the right (#rightpane) to run the full height of the page NOT just the browser window.

The CSS file can be found here.

TIA

Icy
__________________
Quidquid latine dictum sit, altum viditur.

http://www.XSet.co.uk

Reply With Quote
  #2  
Old August 29th, 2003, 11:13 AM
metro metro is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2002
Location: Quazar
Posts: 207 metro User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 m 36 sec
Reputation Power: 11
I had the same problem when putting pixel for the width and % as the height. I don't think you can mix and match.
I would put the contents for the DIV in a table and set the table to height to 100% and the rightpane div width to 250px

Last edited by metro : August 29th, 2003 at 11:16 AM.

Reply With Quote
  #3  
Old August 30th, 2003, 05:47 AM
icy_polecat's Avatar
icy_polecat icy_polecat is offline
Senior Polecat
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jun 2003
Location: Jersey (the original version)
Posts: 210 icy_polecat User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 59 m 57 sec
Reputation Power: 10
Send a message via Yahoo to icy_polecat
hi metro,

thanks for the answer. Unfortunately, I am trying not to use tables for layout on this site in an attempt to retain standards compliance. I'll have a look at using all percentages though - sounds promising.

thanks again

Icy

Reply With Quote
  #4  
Old August 31st, 2003, 01:41 PM
jabba_29's Avatar
jabba_29 jabba_29 is offline
Retired
Dev Shed God 9th Plane (9000 - 9499 posts)
 
Join Date: Feb 2002
Location: Finland
Posts: 9,139 jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)jabba_29 User rank is General 23rd Grade (Above 100000 Reputation Level)  Folding Points: 238337 Folding Title: Super Ultimate Folder - Level 1Folding Points: 238337 Folding Title: Super Ultimate Folder - Level 1Folding Points: 238337 Folding Title: Super Ultimate Folder - Level 1Folding Points: 238337 Folding Title: Super Ultimate Folder - Level 1Folding Points: 238337 Folding Title: Super Ultimate Folder - Level 1Folding Points: 238337 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 4 Months 6 Days 1 h 3 m 40 sec
Reputation Power: 2492
Send a message via AIM to jabba_29 Send a message via Google Talk to jabba_29 Send a message via Skype to jabba_29
Facebook
Check out this thread:
http://forums.devshed.com/t79999/s.html

HTH

Jamie

Reply With Quote
  #5  
Old September 1st, 2003, 05:51 AM
icy_polecat's Avatar
icy_polecat icy_polecat is offline
Senior Polecat
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jun 2003
Location: Jersey (the original version)
Posts: 210 icy_polecat User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 59 m 57 sec
Reputation Power: 10
Send a message via Yahoo to icy_polecat
i'm not sure that works.

I have no problem with the Div being the height of the viewport in either IE or Moz.

My problem occurs when the page is long enough to allow scrolling... then the div is only as high as the viewport was but doesn't stretch to fill the remaining space.

Implementing the code from the other thread doesn't fix this.

Oddly enough I had previously had exactly the same problem as detialled in the other thread but found that adding an XML declaration to the page fixed it in Moz - weird!

Reply With Quote
  #6  
Old September 1st, 2003, 06:24 PM
recess recess is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Posts: 6 recess User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via AIM to recess
You could make your body background-color: #6699cc; and add border-right: 2px #000 solid; to your content id to get the look you want.

Reply With Quote
  #7  
Old September 5th, 2003, 04:47 AM
trza trza is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Sep 2003
Posts: 1 trza User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
I believe I have experienced a similar problem. Try placing all of your layout div's (rightpane, content, mainClm, etc.) inside an extra div, maybe call it maincontainer, for which you set the height through css to be 100%. Keep your rightpane div as 100% height. See if that helps. I don't remember but you may also need to experiment with different combinations of the position attribute by setting the maincontainer to "absolute" and the rightpane to "relative" or vice versa.

Something about the nesting seems to help. Perhaps when a browser calculates the height for your rightpane div, it is setting it to be 100% of the browser window, rather than 100% of your content. You can verify this by resizing your browser window to be smaller (vertically) and then scrolling. You will see that your rightpane div will even shorter than before.

Reply With Quote
  #8  
Old September 5th, 2003, 05:47 AM
icy_polecat's Avatar
icy_polecat icy_polecat is offline
Senior Polecat
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jun 2003
Location: Jersey (the original version)
Posts: 210 icy_polecat User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 59 m 57 sec
Reputation Power: 10
Send a message via Yahoo to icy_polecat
i'm afraid I must admit defeat. I've added a bg image to the body style so it "looks" like the div streches to 100% but it doesn't. Not pretty but better than nothing.

Thanks for all the help though - i'm only just getting started in CSS for positioning so any help or references are truly useful.

Cheers guys

Icy

Reply With Quote
  #9  
Old September 5th, 2003, 11:02 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed God (5000 - 5499 posts)
 
Join Date: May 2003
Location: Dallas
Posts: 5,268 kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level)kk5st User rank is General 15th Grade (Above 100000 Reputation Level) 
Time spent in forums: 1 Month 1 Week 4 Days 10 h 31 m 27 sec
Reputation Power: 1954
See if this site gives you any ideas.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > CSS Divs stretching to 100% height

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap