www.webdeveloper.com
Results 1 to 10 of 10

Thread: Height: 100%; (cross-browser issues)

  1. #1
    Join Date
    Jul 2005
    Posts
    29

    Height: 100%; (cross-browser issues)

    Ultimate Goal: Get the footer to remain at the bottom of the window (when the content is less than 100% of the window's height) or page (when content exceeds 100% of window's height, so that it will merely be pushed down, and not be forced under/over the overflowing content).

    Problems: Firefox/Opera, and the use of "min-height" (more explained below)

    Page: Example (Note how the side bar and white content areas do not extend 100% of the window's height, which is what I'd like)

    Progress: So far everything's fine in Internet Explorer (and every other browser, if I didn't use a doctype). The footer (more notably, the copyright note) stays at the bottom of the window whenever the content is less than 100% of the window's height, and it is only pushed down when the content exceeds 100% height.

    If I set a regular height attribute of 100%, IE is fine, but FF/Opera show that when the content exceeds 100% of window height, the footer simply remains where it is, and the overflowing content continues to spill outside of their respective <div>'s.

    With the min-height attribute, Firefox and Opera will allow the divs to stretch beyond 100%, but when the content is less than 100%, the div is downsized. That's where I'm confused, because I thought that min-height meant minimum-height, yet it doesn't act that way.

    Regardless, I was told the solution was setting both <html> and <body> heights to 100% in the CSS, and then setting the <div> height's to "auto," but keeping the min-height at 100%. No such luck. Which is why I'm here. Is there an alternate way of doing this, or am I missing something in these "solutions"?

    Full CSS

  2. #2
    Join Date
    May 2005
    Posts
    2,040
    if I didn't use a doctype
    I'm a little confused because your example does have a doctype. You cannot design without a doctype and expect it to work the same way once you add one. (Forgive me if I'm misunderstanding).

    In addition, you cannot use IE to design in and then expect it to work in other browsers because IE does not follow standard code properly, particularly without the doctype and especially has problems with height.

    Going out of town today so sorry I can't help further.

  3. #3
    Join Date
    Jul 2005
    Posts
    29
    What I meant is that if I were to remove the doctype, everything functions properly. I designed it with a doctype but know that without one, it would function properly (even in IE's quirks mode).

    In addition, I designed using Firefox, Opera, and Internet Explorer all the same. It functions just as I want it and appears properly in all three browsers except for the problem which I have posted about. This single footer-mishap is all that's left to irk me, and the only focus of this thread. I am fully aware of IE's retardation.

  4. #4
    Join Date
    Aug 2006
    Location
    Nottingham, UK
    Posts
    7

    Height issue

    I'm not sure if this will help but I had a similar problem. I use Safari and your page looks fine to me so I'm not quite sure what you're after.

    In the past I've used:

    body, html {height:100%;}

    and

    table {height:100%}

    I don't like using tables but it was the only way I could find to get the effect I wanted. It basically replaced the container div. Seemed to work in everything except IE 5.2 for Mac where you get 200% page length.

    Hope this helps.

  5. #5
    Join Date
    Aug 2004
    Location
    New York
    Posts
    339
    the only way I have ever seen a footer affixed to the botom of the window "reliably", or rather, consistently, was by relying on quirks mode. I'm not sure how to do it otherwise.

  6. #6
    Join Date
    Jul 2005
    Posts
    29
    I see....

    Well, Retrograffica, the problem is that I've already added those bits, but to no avail. And that's what confuses me--I've seen so many sites claiming to solve my problem, yet the all list the solution I've already tried.

    And sorry, Relia4nt, but I'd really like to keep the doctype, though, so I'll probably just have to live with it...

    I appreciate your help regardless.

  7. #7
    Join Date
    Jul 2005
    Posts
    29
    I thought I'd add that I'm almost done. A great fella on a different forum pointed out my own foolish mistake. I forgot to give #container its own height:100%; attribute, which is why the children divs wouldn't stretch either.

    Right now the #container and #base divs stretch the full 100% height, which is great. My only task remaining (to get the footer at the bottom) is to get the #content div to stretch 100% as well. I've tried adding a filler (whose only style is 100% height) and messing with the min-height thing again, but it seems that the #content div just doesn't want to push my footer down. Any clues how I might get that much accomplished at the very least?

  8. #8
    Join Date
    Aug 2006
    Location
    Nottingham, UK
    Posts
    7

    JS Fix

    OK, I've never used this but it's been sitting in my scripts folder for a while. It claims to fix the IE min height/width problem but I'm not a javascripter so I've got no idea what it's really doing. It says you can use it freely so I have posted it below...

    // minmax.js: make IE5+/Win support CSS min/max-width/height
    // version 1.0, 08-Aug-2003
    // written by Andrew Clover <and@doxdesk.com>, use freely

    /*@cc_on
    @if (@_win32 && @_jscript_version>4)

    var minmax_elements;

    minmax_props= new Array(
    new Array('min-width', 'minWidth'),
    new Array('max-width', 'maxWidth'),
    new Array('min-height','minHeight'),
    new Array('max-height','maxHeight')
    );

    // Binding. Called on all new elements. If <body>, initialise; check all
    // elements for minmax properties

    function minmax_bind(el) {
    var i, em, ms;
    var st= el.style, cs= el.currentStyle;

    if (minmax_elements==window.undefined) {
    // initialise when body element has turned up, but only on IE
    if (!document.body || !document.body.currentStyle) return;
    minmax_elements= new Array();
    window.attachEvent('onresize', minmax_delayout);
    // make font size listener
    em= document.createElement('div');
    em.setAttribute('id', 'minmax_em');
    em.style.position= 'absolute'; em.style.visibility= 'hidden';
    em.style.fontSize= 'xx-large'; em.style.height= '5em';
    em.style.top='-5em'; em.style.left= '0';
    if (em.style.setExpression) {
    em.style.setExpression('width', 'minmax_checkFont()');
    document.body.insertBefore(em, document.body.firstChild);
    }
    }

    // transform hyphenated properties the browser has not caught to camelCase
    for (i= minmax_props.length; i-->0
    if (cs[minmax_props[i][0]])
    st[minmax_props[i][1]]= cs[minmax_props[i][0]];
    // add element with properties to list, store optimal size values
    for (i= minmax_props.length; i-->0 {
    ms= cs[minmax_props[i][1]];
    if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {
    st.minmaxWidth= cs.width; st.minmaxHeight= cs.height;
    minmax_elements[minmax_elements.length]= el;
    // will need a layout later
    minmax_delayout();
    break;
    } }
    }

    // check for font size changes

    var minmax_fontsize= 0;
    function minmax_checkFont() {
    var fs= document.getElementById('minmax_em').offsetHeight;
    if (minmax_fontsize!=fs && minmax_fontsize!=0)
    minmax_delayout();
    minmax_fontsize= fs;
    return '5em';
    }

    // Layout. Called after window and font size-change. Go through elements we
    // picked out earlier and set their size to the minimum, maximum and optimum,
    // choosing whichever is appropriate

    // Request re-layout at next available moment
    var minmax_delaying= false;
    function minmax_delayout() {
    if (minmax_delaying) return;
    minmax_delaying= true;
    window.setTimeout(minmax_layout, 0);
    }

    function minmax_stopdelaying() {
    minmax_delaying= false;
    }

    function minmax_layout() {
    window.setTimeout(minmax_stopdelaying, 100);
    var i, el, st, cs, optimal, inrange;
    for (i= minmax_elements.length; i-->0 {
    el= minmax_elements[i]; st= el.style; cs= el.currentStyle;

    // horizontal size bounding
    st.width= st.minmaxWidth; optimal= el.offsetWidth;
    inrange= true;
    if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') {
    st.width= cs.minWidth;
    inrange= (el.offsetWidth<optimal);
    }
    if (inrange && cs.maxWidth && cs.maxWidth!='none' && cs.maxWidth!='auto' && cs.maxWidth!='') {
    st.width= cs.maxWidth;
    inrange= (el.offsetWidth>optimal);
    }
    if (inrange) st.width= st.minmaxWidth;

    // vertical size bounding
    st.height= st.minmaxHeight; optimal= el.offsetHeight;
    inrange= true;
    if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') {
    st.height= cs.minHeight;
    inrange= (el.offsetHeight<optimal);
    }
    if (inrange && cs.maxHeight && cs.maxHeight!='none' && cs.maxHeight!='auto' && cs.maxHeight!='') {
    st.height= cs.maxHeight;
    inrange= (el.offsetHeight>optimal);
    }
    if (inrange) st.height= st.minmaxHeight;
    }
    }

    // Scanning. Check document every so often until it has finished loading. Do
    // nothing until <body> arrives, then call main init. Pass any new elements
    // found on each scan to be bound

    var minmax_SCANDELAY= 500;

    function minmax_scan() {
    var el;
    for (var i= 0; i<document.all.length; i++) {
    el= document.all[i];
    if (!el.minmax_bound) {
    el.minmax_bound= true;
    minmax_bind(el);
    } }
    }

    var minmax_scanner;
    function minmax_stop() {
    window.clearInterval(minmax_scanner);
    minmax_scan();
    }

    minmax_scan();
    minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY);
    window.attachEvent('onload', minmax_stop);

    @end @*/

  9. #9
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="" />
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <style type="text/css">
    body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
    #footer {position:absolute; bottom:0; left:50px; border:2px solid black; width:410px; height:25px; padding:15px; margin:5px auto 20px auto;}
    </style>
    </head>

    <body>
    <div id="footer">
    <p>This footer is positioned at the bottom of the screen and stays there.</p>
    </div>
    </body>
    </html>

  10. #10
    Join Date
    Jul 2005
    Posts
    29
    I appreciate your guys's responses, but neither will work.
    1) I never use JavaScript--it's a personal preference thing, since I myself always block it.
    2) I can't use absolute positioning, because the entire layout is centered (and I'd prefer to keep it that way).

    I'll keep you guys updated if I find a solution..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles