Jul 25, 2008

100% Height Issue With Stretching Top To Bottom - Full Page - Problem with content not stretching from top to bottom.

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > CSS (Cascading Style Sheets)

free web hosting

100% Height Issue With Stretching Top To Bottom - Full Page - Problem with content not stretching from top to bottom.

sonesay
Another CSS problem thats been annoying me. I got this tempalte off http://www.xs4all.nl/~peterned/examples/csslayout1.html the css file is here http://www.xs4all.nl/~peterned/examples/css/layout1.css I went ahead and applied it to my template. Their main divs contain 1 main container, 3 sub divs (header, content, and footer).
HTML
<div id="container">

<div id="header">
</div>

<div id="content">
</div>

<div id="footer">
</div>

</div>

I've had to add a few more divs inside the header div to include my table for banner and navigation.
HTML
<div id="header">
<?php include("includes/_header_section.php"); ?>
<?php include("includes/_login_section.php"); ?>
<div id="content_section_heading"> </div>
</div>

my output template file http://sonesay.trap17.com/gag/new_template.php its css http://sonesay.trap17.com/gag/css/new_style.css

I need the content part to cover all the space between the header and footer to cover the #cotainers bg color.


my original problem which lead me to redo the above template was the output of my news (sample version) http://sonesay.trap17.com/gag/news_test.php. Once the page got too long the footer which is surpose to be fixed at the bottom moves. I ran the document at w3 validator and it checked out ok.

http://sonesay.trap17.com/gag/news_test.php is using CSS from http://sonesay.trap17.com/gag/css/style.css sorry its abit clutered and have alot of unused ids and classes there.

Notice from BuffaloHELP:
Always use proper bbcode tags.

 

 

 


Reply

BuffaloHELP
Try adding
CODE
DIV#content_section_heading

with position, height and width values.

When you place ID on DIV tags, you have to define it in CSS every time. Or, you could have defined DIV to be full width and height all the time. But that's at designer's choice. To make every DIV to be in full height and width:
CODE
DIV { height:100%; width:100% }


Reply

jlhaslip
Do you want something like this: http://jlhaslip.trap17.com/samples/templat...amed/index.html

Snag that page and check it out.

Reply

sonesay
Yeah Jihaslip thats the desired effect but I dont like frames(or fame effect) sad.gif. I prefer the vertical scroll bar to span all the way from top to bottom and have the page appear as one long page. But I think the problem occurs when the page gets too long and the footer comes off position as here http://sonesay.trap17.com/gag/news_test.php but its just cosmetic.

I've tried the sugestion by buffalohelp its still not doing what I want it to do. There is another template i may look at its at http://www.openwebdesign.org/design/3270/zenlike/ its similar to what i want but without the top and bottom being set at 0 hopefully this wont lost position when i put in the content.

Thanks for the link to that example on frame like layout. I would probably like to use something like that for future projects. As for now Il' keep trying to fix it or maybe try get it working on the zenlike template. But I really should keep working on finishing the site as much as Id like things to be exactly as I want it to be I know because of differrent browsers its almost impossible.

Again thanks for your hlep guys trap17 rules!

 

 

 


Reply

delivi
thanks for sharing the information, this is really very useful

I was searching for an effective method that works in all browsers.

Reply

jlhaslip
Found this link in my travels.

http://ryanfait.com/sticky-footer/

Might work for you???

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. div height 100% of page - 12.59 hr back. (1)
  2. keep div bar at bottom of page - 82.04 hr back. (2)
  3. 100% height - 128.76 hr back. (1)
Similar Topics

Keywords : 100 height issue stretching content stretching

  1. Css Help 100 % Height - (6)
  2. How Do I Extend My Div To 1oo% Height? - Also welcoming criticisms on my webpage (13)
    Hi all, this is a two part post, firstly how do i get my DIV to go the full length of my page
    without specifying its height in pixels? My first thought is by using a percentage height but it
    seems to have no effect on the DIV. I ask because of this page http://www.shadows.trap17.com/ww/
    that i created. Now im using 128Ox8OO res at the moment and with my current use of BR tags i can
    extend the div down to the bottom of the page, only in firefox its a few pixels too short and in IE
    its a few too long so i get scrolling in IE and a grey gap in FF, not good for a website ...
  3. Height % In Ff Problems With Css - (3)
    Does anyone know how to make the height of a div in firefox equal to the percentage you input? For
    example if I put blablabla the div container will only be as high as the text makes it, when in
    internet explorer it does make it take up 100% of the page or whatever height in percentage I input
    in it. by the way, html, body {} have 100% height in them, so does the container that has the div
    element. Example: html,body {height:100%;} #container {height:100%;} #div {min-height:100%;} the
    one called #div is the one I want with 100% height. Thanks for any help....
  4. Basic Css Layout Issue - Floated Cell with similar height (5)
    Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem
    being I don't know how to make a floated cell be the same height as another. FOr example CODE
    <div id="main"> <div id="left"> just some </br> stuff
    over </br> here! </div> <div id="right"> but...</br>
    over here </br> I have </br> even more stuff</br> to </br>
    display</br> </div> </div> now If I float the left to the left ...



Looking for 100percent, height, issue, stretching, top, bottom, full, page, problem, content, stretching, top, bottom,

Searching Video's for 100percent, height, issue, stretching, top, bottom, full, page, problem, content, stretching, top, bottom,
advertisement



100% Height Issue With Stretching Top To Bottom - Full Page - Problem with content not stretching from top to bottom.



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE