SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Malaysia
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A fix to 100% height DIV, similar to table layout.

    I have a question here for those who know about CSS layouts very well. I've done some searches on the net and find that people still can't find a solution for a DIV that:

    - stretch to 100% of the page height when the content height is less than 100%.
    - expand to fit the contents when the contents height is more than 100% of the page.

    This pretty much works the same as the old table layout. I just need to ask is there already a solution to this problem?

    I ask this because I think I have found a solution, a working one tested under Mozilla Firefox 0.8-1.0, Opera 7.23, and IE 5.5/6.0; and it is purely CSS with no hacks and no Javascript.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm afraid this has been solved many times and you can see demos in my 3 col demo thread which has been up there about a year:

    http://www.sitepoint.com/forums/showthread.php?t=143801

    I have also set up a two threads in the FAQ that explain how to achieve 100% height and how to always keep a footer at the bottom of the page. I think mine was one of the first examples but there have been many since using things such as display:table for good browsers and just letting IE use height.

    I know 2 or 3 different ways to achieve this reliably across browsers and I can even do you one for ie5 mac (although its a little convoluted).

    However if your method is different to all the above methods then of course we would be pleased to see it as it may be a better solution and I always like to see new methods as it keeps things fresh.

    So if your code isn't a repeat of the techniques in the 3 col demo and FAQ's then post away

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well there are quite a lot of solutions with known height of footer and i've recently created a solution for a footer of unknown height which I am going to post here soon, works in all browsers except for IE/Mac

    if your solution doesn't work in IE5 then it is quite bad... cause quite a lot of people still use it, anyways just post it here

  4. #4
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Malaysia
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B. I believe mine has a much simpler way but I do not know whether it works in the older versions of IE or not because I have limited browsers for testing purposes.

    Here's the file: http://www.snecx.com/temp/height.html

    CSS used are:
    Code:
    html, body {
    	height: 100%;
    	min-height: 100%;
    	margin: 0;
    	padding: 0;
    }
    html > body {
    	overflow: visible;
    }
    body #layout {
    	margin: 0 auto;
    	padding: 0;
    	height: 100%;
    	min-height: 100%;
    }
    body > #layout {
    	height: auto;
    }
    And the HTML should be as simple as:
    Code:
    <html>
    <head> ... </head>
    <body>
    <div id="layout">
       contents...
    </div>
    </body>
    </html>
    I'm working on a way to make a 3 column stretch without using any background-image and without a footer, just 3 column stretch down to the page (seems quite impossible to me for now).

    University is taking my time, lol.

    Oh yeah, my layout just works to provide a single DIV that has effect similar to the follow:
    Code:
    <table height="100%">
        <tr>
        <td>contents</td>
      </tr>
    </table>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    lol - thats more or less the same as the layout in my demos - didn't you check the code? .

    All you need for 100% height is basically these three lines.

    Code:
    html, body{height:100%;} 
    #outer{min-height:100%;}
    * html #outer {height:100%;}
    This will work in all the browsers listed on my demo.

    However you need to add the following code to hide the first declaration for ie5 mac otherwise it chokes on the html,body {height:100%}. You also need to set the body margins and borders to zero otherwise they get added to the 100%. You don't need the overflow:visible and its best not to use the child selector as ie5 has problems with it and will read the last bit of the style.

    Heres the revised code:
    Code:
    /* commented backslash mac hiding hack \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    html, body{margin:0;padding:0}
    #outer{min-height:100%;}
    * html #outer {height:100%;}
    There are fixes in the demo for safari and I can even do a version for ie5mac if necessary.

    http://www.pmob.co.uk/temp/mac3column.htm


    I'm working on a way to make a 3 column stretch without using any background-image and without a footer, just 3 column stretch down to the page (seems quite impossible to me for now).
    My demos do that already and only use a background image if you want another colour for the column. I do have a version which makes three equalising columns each with a different colour and no background images.

    http://www.pmob.co.uk/temp/new3colfluid/3colfluid_1.htm

    The example above isn't using the 100% height routines but could easily be added if necessary.

    My methods aren't unique and there are other layouts about that use different methods (also see xerxos post above).

    http://css-discuss.incutio.com/?page=ThreeColumnLayouts

    Hope that gives you something to work with

    Paul




  6. #6
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Malaysia
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the helps! Sometimes it's just interesting to get some challenge.

    I can see in the samples that you have to use different way to arrange the DIVs to make the 3 columns work. I guess this is the limitation that we have right now.

    How if you are to change just the CSS for something like the codes below:

    Code:
    <body>
    <div id="layout">
      <div id="menu">Supposed to have this as the left column</div>
      <div id="contents">Middle column</div>
      <div id="links">Some links and extra stuff, on the right column</div>
    </div>
    </body>
    I want something more semantic. Hmm, looks like everyone tried and still there ain't any good solutions yet. LoL, sounds very impossible now.

    I'll try and crack my head for this when I get the time, as how I've spend 3 weeks of my trimester break for a clone of Textile 2. Lucky enough I managed to code my own version that works as expected and fast enough for conversion on the fly (10x faster than any existing versions).

    Hmm, a second thought, I might give up for this right now. LoL.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mine is coming soon though it is quite messy too but the content goes in right order and it doesn't work in IE/Mac


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •