Hello all,

This is a relatively simple problem I ran into when designing my site, so hopefully you can help me out here. I have a div like so (for example):

<div class="box">testing</div>

And here's the CSS:

.box {
        margin-left: auto;
        margin-right: auto;
        width: 50px;
        color: red;
        background-color: blue;
    }

Now how do I make the the div basically extend all the way to the bottom of the screen, so I've got a blue stripe down the middle? At first I thought that a div clear:both would do it, but my research seemed to show otherwise, and didn't work when I tried it inside or outside the div box.

Thanks in advance,

--Joe

Nevermind. I forgot about "height: 100%". Works great. :D

I laughed too soon. When I turn it into XHTML 1.0 strict, the box no longer stretches the entire length of the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>blah</title>
<style type="text/css">

    .box {
        margin-left: auto;
        margin-right: auto;
        width: 50px;
        color: red;
        background-color: blue;
        height: 100%;
    }

</style>
</head>
<body>
<div class="box">testing</div>

</body>
</html>

Aaah... it's a difficult one. Height 100% doesn't work in XHTML; it means '100% of the height of everything on the page'. So, if there's nothing on the page, 100% height is nothing. This even affects background images in some browsers... specifically Firefox if I remember correctly; the background image only covers the area from the top of the page to the bottom of the last piece of content; so if the page is very short in terms of its content; it gets a short background.

Wierd; but it seems that the functionality is either, not well standardised, or deliberately standardised in a way that goes against the largest of 100%-of-inner-window and 100%-of-content approach, which, in my opinion, is more intuitive and useful.

You can keep using 100%, and force the height of the div's immediate parent container to have a non-zero height that's close to a reasonable average screen height ( even specifying this on the <body> element should work ). The div should then always fill the same height that all content on the page fills, and it shouldn't ever be smaller than a screen, but, it might always be bigger than most screens..

I can't give a good one-size-fits-all solution to this problem, because I've never found one myself and it's a problem I've encountered quite a bit with various layouts.. Personally, I'd design without that aspect deliberately because I know it'll be problematic, or if it's absolutely essential, use Javascript to adjust with respect to window size... I find that annoying though; that standards make it more difficult to do something that was originally very simple.

'nuff said from me; post back if you find a good solution for this, I'd be eager to know if there is one.

commented: thanks for the info --joeprogrammer +9

Ah ok, thanks very much Matt for the reply.

What I ended up doing was placing a blue gif with dimensions of 50x1, and used this as the body background image, and then setting it at repeat-y and top centered. I then set the background color to white of course, and it more-or-less worked.

So I do waste some extra bandwidth by forcing the user-agent to download a gif just to display a single color, but at least it works at all screen resolutions.

You don't need a gif file. I have done it with style sheets, with foreground and background colors the same and a line of alternating . with <br /> .

Put this inside its own div.

You don't need a gif file. I have done it with style sheets, with foreground and background colors the same and a line of alternating . with <br /> .

Put this inside its own div.

Yes, but that solution isn't very flexible, and isn't much better than Matt's suggestion (setting the parent div's height to a reasonable screen height).

I don't want the page to be longer than necessary, and a colored gif seems to work for me.

[edit] I just noticed that DaniWeb has something similar with the gray on the margin -- I wonder how Dani implemented this...? (and I'm too lazy to look in the CSS :P )

The gray margins are just margin syles applied to the body tag. The darker gray is the border attribute.

The gray margins are just margin syles applied to the body tag. The darker gray is the border attribute.

Sorry, I kind of forgot about this thread.

Just how do you apply "margin styles"? Going back to my previous example, I would set body-background to blue , and the width would be 50 pixels. But how do I change the color of the whitespace in the margin? Googling turned up nothing.

Try using:

height: 100%;
min-height: 100%;

The margin isn't an addressable area; it takes the colour/image that is assigned to the background of the outer container.

A given container has a padding (space inside) a margin (space outside) and I suppose a border (space between). Setting a margin or padding sets an amount of spacing around the border or inside the border; you can't change the background in a container's margin without changing the background of the container that respects the margin (usually the container's parent container), and you can't change the background of a container's padding without changing the background of that container.

Border is quite a useful property... you can make partial borders that are 0 - ? px / % / pt thick, and set a block color, this will act like a big coloured margin.

Margin styles don't exist per-se... The margin of the body tag works more like padding does in other containers; that is, a non-zero ( and positive ) margin on the body pushes content into the middle of the page. On any other element; a positive margin pushes content away from that element. <edit> or perhaps, it pushes that element away from other content.. depending on which way you look at it</edit>

I'd be interested to know if min-height: 100% works... if it sorts out scaled elements, it should sort out the half-page backgrounds I keep getting...

Check out this page:

http://apptools.com/examples/tableheight.php

the important part is this CSS snippet:

html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none
   }

in a test with a new w3c doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%;padding:0;margin:0;border:none;">
<head>
</head>
<body style="height:100%;padding:0;margin:0;border:none;">
<div style="height:100%;background-color:blue">Anyone would think I've used a background color...</div>
</body>
</html>

This seems to work as expected in opera and firefox..

So, if you use that style in your page, anything you make as 100% high should be the height of the page at minimum, and otherwise as big as the content on the page, and not only in quirks mode..

Try using:

height: 100%;
min-height: 100%;

Just tried it, didn't work.

The margin isn't an addressable area; it takes the colour/image that is assigned to the background of the outer container.

That was my understanding, but I got all confused when MidiMagic mentioned "margin styles".

Check out this page:

http://apptools.com/examples/tableheight.php

the important part is this CSS snippet:

html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none
   }

in a test with a new w3c doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%;padding:0;margin:0;border:none;">
<head>
</head>
<body style="height:100%;padding:0;margin:0;border:none;">
<div style="height:100%;background-color:blue">Anyone would think I've used a background color...</div>
</body>
</html>

This seems to work as expected in opera and firefox..

So, if you use that style in your page, anything you make as 100% high should be the height of the page at minimum, and otherwise as big as the content on the page, and not only in quirks mode..

Hey, that worked! Thanks, I was getting annoyed at having to use a colored gif. This will work great.