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

100% Height Div Layout

Discuss 100% Height Div Layout in the Web Design Help forum on Dev Shed.
100% Height Div Layout Web Design Help forum discussing topics such as video editing, audio editing, animation, etc. This is also the place to get recommendations on preferred web authoring tools.

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 February 19th, 2004, 09:19 PM
thrended's Avatar
thrended thrended is offline
Random
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: Universe
Posts: 23 thrended User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Please Help with 100% Height Layout
At my website, http://thrended.functionhost.com, I would like the main body text to be inside a div box (or other scrollable element) that would be a height of 100% - 100px. I'm not really sure how to do this though. I've tried a few things but they didn't work as I wanted and some required Javascript which would be okay if it worked but not prefered since not all browsers support it. I also tried simply adding html{height:100%}, but this made the page look really weird with repeating backgrounds of the top and bottom table rows. I would like the text to be scrollable instead of the whole page so that the viewer doesn't have to scroll up to use the folder navigation. If you know of a way to do this, please help me out; I appreciate any that you can offer. Thank you.
Last edited by thrended : February 19th, 2004 at 09:30 PM. Reason: Changed Title + Specifaction
Reply With Quote
  #2  
Old February 21st, 2004, 09:02 PM
thrended's Avatar
thrended thrended is offline
Random
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: Universe
Posts: 23 thrended User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Unhappy
Does anyone know how to do this? Please help if you can.
Reply With Quote
  #3  
Old February 22nd, 2004, 01:13 AM
Redback42's Avatar
Redback42 Redback42 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: Port Macquarie, Australia
Posts: 2 Redback42 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Re Div height
Quote:
Originally Posted by thrended
At my website, URL, I would like the main body text to be inside a div box (or other scrollable element) that would be a height of 100% - 100px. I'm not really sure how to do this though. I've tried a few things but they didn't work as I wanted and some required Javascript which would be okay if it worked but not prefered since not all browsers support it. I also tried simply adding html{height:100%}, but this made the page look really weird with repeating backgrounds of the top and bottom table rows. I would like the text to be scrollable instead of the whole page so that the viewer doesn't have to scroll up to use the folder navigation. If you know of a way to do this, please help me out; I appreciate any that you can offer. Thank you.

Not really sure what you're asking. Had a look at your site and you've got a div element there with a scroll using overflow:auto so you appear to know how to do that already. What do you want it to be 100% of???? The div element itself??? The entire page??? Will help if I can but need more info.
Reply With Quote
  #4  
Old February 22nd, 2004, 06:16 PM
thrended's Avatar
thrended thrended is offline
Random
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: Universe
Posts: 23 thrended User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Quote:
Originally Posted by Redback42
Not really sure what you're asking. Had a look at your site and you've got a div element there with a scroll using overflow:auto so you appear to know how to do that already. What do you want it to be 100% of???? The div element itself??? The entire page??? Will help if I can but need more info.

I want the whole page to take up one hundred percent of the page height. Here's an example:
http://jspevak.buildtolearn.net/sam.../thrended1.html
The only problem is that if the content is too big to fit the page, you'll have to scroll anyway. I would like it so that the page would always fit one hundred percent and the text inside the page would scroll by itself, with the outside border and folders staying where they are. Note that the images don't display on the sample pages because I configured .htaccess so that you can't view my images and stuff at anywhere other than my site, and you can't download them either (or at least I think that's the reason; before I changed .htaccess, it worked).
Last edited by thrended : February 22nd, 2004 at 06:20 PM. Reason: Added stuff
Reply With Quote
  #5  
Old February 26th, 2004, 08:08 PM
thrended's Avatar
thrended thrended is offline
Random
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: Universe
Posts: 23 thrended User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
So? Are you able to help?
Reply With Quote
  #6  
Old February 26th, 2004, 10:03 PM
Sexay_Hamster Sexay_Hamster is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 65 Sexay_Hamster User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
<style type="text/css">
#main
{
height: 100%;
}
</style>

<html>
<div ID="main">
stuff....
</div>
</html>
Reply With Quote
  #7  
Old February 27th, 2004, 06:14 PM
thrended's Avatar
thrended thrended is offline
Random
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: Universe
Posts: 23 thrended User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Quote:
Originally Posted by Sexay_Hamster
<style type="text/css">
#main
{
height: 100%;
}
</style>

<html>
<div ID="main">
stuff....
</div>
</html>


Have you seen http://thrended.functionhost.com? I don't just want the whole page to be scrollable, I mean, the body text with the content and stuff, excluding the folders and border! o.o Sorry, it's just that people never seem to understand me even though I'm usually pretty clear.
Reply With Quote
  #8  
Old February 28th, 2004, 01:40 AM
RockNRollPig RockNRollPig is offline
So...I'm like...yeah
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 11 RockNRollPig User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 m 36 sec
Reputation Power: 0
Using the "height" element in CSS is sketchy at best. You can't rely on it at all. You'd be better off finding another solution.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > Web Design Help > 100% Height Div Layout

« 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.