CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

making div(css) full page height

Discuss making div(css) full page height in the CSS Help forum on Dev Shed.
making div(css) full page height Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old November 4th, 2003, 05:42 AM
elesueur elesueur is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 3 elesueur User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
making div(css) full page height
I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page.

I have
height: 100%;
in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch?
I have tried height: auto; but that doesnt work either.
Reply With Quote
  #2  
Old November 4th, 2003, 01:27 PM
stinkoman's Avatar
stinkoman stinkoman is offline
what's your moniker?
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Location: Highland Park, NJ
Posts: 201 stinkoman User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Send a message via AIM to stinkoman
Re: making div(css) full page height
Quote:
Originally posted by elesueur
I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page.

I have
height: 100%;
in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch?
I have tried height: auto; but that doesnt work either.


could you post the code or a link?
__________________
new jersey web design
Reply With Quote
  #3  
Old November 24th, 2003, 10:27 AM
kMotion kMotion is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 1 kMotion User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Div Positioning
Here's a link showing the same problem that I too have...

URL
Reply With Quote
  #4  
Old November 24th, 2003, 05:03 PM
elesueur elesueur is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 3 elesueur User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
yea.. and if you had another div to the right of that which was higher, the left one wouldnt expand to the full height...

is there anyway to automatically expand a div height to the full height of the scroll bar? rather than just 100% of the screen height?
Reply With Quote
  #5  
Old November 24th, 2003, 11:06 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,674 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687
This tutorial covers what you want.

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
  #6  
Old November 24th, 2003, 11:24 PM
kcocgibkcusuoy's Avatar
kcocgibkcusuoy kcocgibkcusuoy is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2003
Location: La Palma, CA
Posts: 100 kcocgibkcusuoy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 22 m 29 sec
Reputation Power: 6
Send a message via AIM to kcocgibkcusuoy
elesueur, there's a simple way to do this..
Code:
<div><!-- make a <div> to hold everything in.. -->

<div style="width:125;height:100%;">blah blah blah</div>

<div style="height:100%;">blah blah blah</div>

</div>

anyway, that's the way i do it..
Reply With Quote
  #7  
Old November 25th, 2003, 03:18 AM
elesueur elesueur is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 3 elesueur User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
of course! how stupid of me not to think of that.. the div inside will take on the height of the outer div.

thanks for that man
Reply With Quote
  #8  
Old November 25th, 2003, 04:31 AM
kcocgibkcusuoy's Avatar
kcocgibkcusuoy kcocgibkcusuoy is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2003
Location: La Palma, CA
Posts: 100 kcocgibkcusuoy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 22 m 29 sec
Reputation Power: 6
Send a message via AIM to kcocgibkcusuoy
Glad i could help.
It's always the simplest solutions that are the most difficult to find.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > making div(css) full page height

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
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 | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway. 
Stay green...Green IT