20 replies [Last post]
brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

http://www.dev.webinkcreative.com.au/clients/s/suwito/new2/index.php
http://www.dev.webinkcreative.com.au/clients/s/suwito/new2/style.css

As you can see, #footer is at the bottom of the page. I've got a background image set to repeat-y and no height, figuring it would inherit the height of the body, however it doesn't appear to do that. How would I go about having this div extend right to the bottom of the browser window? Thanks in advance.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I'm not sure what your aim

I'm not sure what your aim is. It often helps to build a test page with actual content rather than just bare building blocks. Your footer won't have any height without a height set (it won't inherit height from anything) or without any content.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

If you look in the

If you look in the stylesheet, you'll see under #footer:

background-image: url(images/bar.gif);
background-repeat: repeat-y;
background-position: 545px 0px;

bar.gif is a 1x1 grey pixel which I want to extend downwards to the bottom of the browser window in order to produce a grey bar. How would I go about doing this?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why not attach it to the

Why not attach it to the body? Everything else will simply sit on top of it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Thought of that, but in

Thought of that, but in doing so, said 'bar' won't move when the browser window is resized, and thus will be out of alignment with the rest of the layout under that circumstance.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I'm still having trouble

I'm still having trouble visualising what it's s'posed to look like. If it's just 1 x 1, it's going to be a solid colour, right? So why wouldn't you make the body bg a solid colour and then just layer other coloured areas over the top?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Well, that's what I'm kind

Well, that's what I'm kind of doing Tongue

If you have a look at the top of the page (within the grey area), you'll see a thin darker grey line a little to the right of the center. That's bar.gif on repeat-y. I simply want the exact same thing to occur but at the bottom of the page, extending to the bottom of the browser window Smile

It actually already extends down a little - 37px, the height specified for the footer in the stylesheet, but is there a way to have it extend down all the way?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm not sure exactly what

I'm not sure exactly what you are after but as a quick and hurried solution this extends your gray bar from top to bottom but there are probably better methods of approaching this and this may not be what you were after at all! in which case ignore me Smile.

#white, #contentouter, #footer{

background: url(images/bar.gif) repeat-y 545px 0;

}

div#imageframe {
width: 800px;
height: 211px;
background: url(images/img_frame.gif) no-repeat 1px;
}

You would of course add the other divs requiring the graphic to that main grouping.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Ah Thanks Hugo, though I

Ah Smile Thanks Hugo, though I think you've misunderstood me a bit. I'm not looking for the bar to extend up through the content area of the page, but merely from the top of the #footer div downwards to the bottom of the browser window. Now, it already actually does this on lower resolutions, however I'm running 1280x1024 and seeing as the whole site fits into the browser window without scrolling, you can see where the footer div ends vertically. What I'm wanting it to do, really, is extend 100% to the bottom of the browser window.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Have you done a search on

Have you done a search on 100% height layouts as that may be what you're after?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

SOrry Tyssen, I have no idea

Sorry Tyssen, I have no idea what solution I should be searching for Tongue Most solutions seem to be for 100% columns stretching vertically from the top to the bottom of the page, while what I'm searching for is simply to have the bottom placed div extend down to the bottom of the browser. Setting #footer to 100% doubles the height of the website Tongue

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

This is where my

This is where my understanding comes unstuck a bit. Why is there any space below your footer to the bottom of the window? Shouldn't the footer be at the bottom? If it's not on shorter pages, then looking into 100% height methods may be what you need because it'll force the footer to be at the bottom of the content or the window, whichever is longer.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Well, #footer is positioned

Well, #footer is positioned at the bottom of the page? See, what I'm trying to do is have the footer extend down 37px on computers on a lower res than mine, then for resolutions such as mine or bigger, have the footer div continue extending down to the bottom of the browser. For example, at 1024x768 I would like it to look as shown at http://img168.imageshack.us/img168/6299/1pm9.gif, while at 1600x1200 I would like it to look as shown at http://img181.imageshack.us/img181/251/2zm2.gif - as you can see, the grey area of the footer extending all the way to the bottom of the page, and thus bar.gif doing the same.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I've read this thread over

I've read this thread over more than twice, and am too confused to try again. I think this is what you want. I modified my fixed footer demo to 1)let the box dimensions show on the page, 2) allow better control of the width and 3) not hide the fact that the content box doesn't really reach the footer with short content.

The concept isn't all that arcane, but might require some study to fully grok.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
<meta name="description" content="Lock your footer to the bottom of the screen or bottom of content, whichever is lower" />

  <title>Footer at the bottom of the viewport | Gary Turner's html & css playpen</title>
<style type="text/css">
/*<![CDATA[*/

html, body, #wrapper {
    min-height: 100%; /*Sets the min height to the
                        height of the viewport.*/
    width: 100%;
    height: 100%; /*Effectively, this is min height
                    for IE5+/Win, since IE wrongly expands
                    an element to enclose its content.
                    This mis-behavior screws up modern  
                    browsers*/
    margin: 0;
    padding: 0;
    }

html>body #wrapper {
    height: auto; /*this undoes the IE hack, hiding it
                    from IE using the child selector*/
    }
    
html {
    background-color: #fff;
    }

body {
    font: 100% verdana, helvetica, sans-serif;
    background-color: gray;
    color: #333;
    position: relative;
    width: 80%;
    margin: 0 auto;
    outline: 1px dotted red;
    }

p {
    font-size: 1em;
    margin: 1em 0;  /*required for IE's buggy behavior
                      with collapsing margins*/
    }

h1, h2 {
    font-family: georgia, serif;
    text-align: center;
    text-transform: capitalize;
    }

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    }

#main {
    height: auto;
    padding: .5em;
    padding-bottom: 3em;   /*Keeps content above footer. Originally
                           used margin, but a bug in Opera7 seemed
                           to add spurious margin, pushing the
                           footer beyond the viewport even with
                           short content. */
    background-color: #fee;
    }

/*the following is not a part of the demo, but
 *just css for the banner.  Your banner can be
 *anything you want, as long as it lives within
 *the #main div
 */
#pageheader {
    border: 0 none;
    display: table;
    width: 60%;
    }

#pageheader p {
    color: #a00;
    float: left;
    font-family: georgia, serif;
    font-size: 2em;
    font-weight: bold;
    line-height: 1.2;
    margin: 0.67em 0 0;
    }

#pageheader p span.light {
    color: #669;
    float: right;
    font-size: .75em;
    font-weight: normal;
    }

#pageheader a {
    display: block;
    color: #a00;
    text-decoration: none;
    }

#pageheader hr {
    clear: both;
    height: 1px;
    color: #999;
    background-color: #999;
    margin: 0 0 0 2em;
    }
/*end of pageheader css*/

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #eef;
    }
 
.kern {
    letter-spacing: -.1em;
    }

/*]]>*/
</style>

</head>

<body>
  <div id="wrapper">
    <div id="main">
      <div id="pageheader">
        <p><a href="../index.html">Gary <span class=
        "kern">T</span>urner’s<br />
        <span class="light">html and css playpen</span></a></p>
        <hr />
      </div>
<h1>Lock the footer to the bottom of viewport</h1>
<p>The footer will sit at the bottom of the viewport unless the content pushes it down.

      <p>Put your whole page in #main, everything except the footer.</p>
      <!-- uncomment the following to see long content -->
<!--
      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>

      <p>spacer</p>
-->
    </div><!-- end main -->

    <div id="footer">
      <p>Put your footer stuff here.</p>
    </div><!-- end footer -->
  </div><!-- end wrapper -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

kk5st - thanks for your

kk5st - thanks for your attempt at help Smile I'm not actually trying to have the footer stick to the bottom of the page. I simply want #footer to start directly underneath #white, and continue right to the bottom of the browser window (thus displaying its background image right to the bottom of the browser window).

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Bump

Bump Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I don't know of any way to

I don't know of any way to get the bg image to have an upper edge begin at the bottom of a given element. Well I might, but IE, including v7 does not support enough of css2. The image would have to be on a full length element, such as body or in the example, #wrapper.

If the image were the right type, you could anchor it at the bottom, to be cut off at the top, where the content ends.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Hm, that explains it I

Hm, that explains it I suppose. See, the background image works perfectly if I'm to use a #wrapper, but to have bar.gif positioned at the right place and scale when dragging the browser in horizontally, I have to set #wrapper to 800px width and margins left and right to auto. What this means is that #white and #red obviously aren't able to expand the full width of the page due to #wrapper being 800px wide. Is there some other way I'd be able to position bar.gif in the right place while having #wrapper (or indeed, body) set to 100% width, and still have it move inwards with the rest of the page when making the browser window smaller or bigger?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Is bar.gif a solid color?

Is bar.gif a solid color? If so, make the underlying element's bg color match it, and have all the descendant elements have an explicit bg color of their own. Then when you run out of elements, the only thing left is the bar color.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Hmm, I'm not quite sure how

Hmm, I'm not quite sure how that would work in this case - would I not have to create two divs, floated left and right, inside a container, in order to create the illusion of there being a bar.gif? And further to that, I wouldn't be able to have a set width for these two divs otherwise the site would not be scaleable horizontally, correct?

Sorry, I just realised the URLs in the original post aren't working. The site can be viewed at http://www.dev.webinkcreative.com.au/clients/s/suwito/work_in_progress/public_html/index.php and the stylesheet at http://www.dev.webinkcreative.com.au/clients/s/suwito/work_in_progress/public_html/style.css.

Bar.gif actually seems to display properly in IE (haha), but not FF and Opera. I'm viewing on 1280x1024. I've taken a screenshot to illustrate what I mean - http://img171.imageshack.us/img171/4259/problemgj8.jpg

brendanwor
Offline
Enthusiast
Last seen: 11 years 50 weeks ago
Timezone: GMT+11
Joined: 2006-01-16
Posts: 60
Points: 0

Bump

Bump Smile