Making a DIV that's 100% of the browser height unless content is taller than browser?_问答_开发者

I'm trying to create a page that has:

a standard background image set on the BODY tag
a parent DIV with a width and height of 100%, that has a transparent PNG as a background image.
a child DIV that could contain varying amount of text.

So, the structure would be something like:

CSS:

html, body {
    width: 100%;
    height: 100%;
    margin: 0 0;
    padding: 0 0;
}
body {
    background-image: url('bgimage1.jpg');
}
#parentDiv {
    width: 100%;
    min-width: 960px;
    height: 100%;
    background-image: url('contentDiv_dropshadow.png');
    background-position: center top;
    background-repeat: repeat-y;
}
#contentDiv {
    width: 800px;
    margin: 0 auto;
    background-color: #DADADA;
}

HTML:

<body>
    <div id="parentDiv">
        <div id="contentDiv">
            <p>Paragraphs of text...</p>
        </div>
    </div>
</body>

Basically, #contentDiv contains text entries, #parentDiv contains a transparent PNG dropshadow image (so that contentDiv has the illusion of having a dropshadow) and I would like both #contentDiv and #parentDiv to run all the way to the bottom of the browser at all times.

The problem I'm running into is that, if I give #pare开发者_运维技巧ntDiv a height of 100% and then make the browser window smaller than the content in #contentDiv, the window will get a scrollbar to view the remaining content and, when I scroll down, #parentDiv won't stretch past the initial browser height.

Setting #parentDiv's height to 'auto' will cause the dropshadow image to repeat down to the end of #contentDiv's content, but if #contentDiv doesn't fill the browser's full height, both #parentDiv and #contentDiv will end abruptly where the text ends.

Is there a non-Javascript solution to have both of these DIVs go the full height of the browser if there's not enough content to push the DIVs to the bottom (like height: 100%), but also stretches beyond the browser's height if the content runs longer?

You could make one of the div elements scrollable with overflow: auto; and keep the body at 100%. Not exactly what your asking for, but I think it will give the behavior you're asking for. Note that if you do this on a div that is not 100% the scrollbar will only be the size of the div instead of the whole browser window size, which seems like what you want so I would put it on the #parentDiv.

EDIT: I have been testing my web pages on mobile devices (iPod touch, iPhone and iPad; I have not tested Android or other platforms yet) and scrollable div's DO NOT work on these devices.

I tried something like this... just check

<html>
    <head>
    <style type="text/css">

body {
    background-image: url('bgimage1.jpg');
}
#wrapper
{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:0px;
}
#parentDiv {
    width: 100%;
    min-width: 960px;
    min-height:100%;
    background-image: url('contentDiv_dropshadow.png');
    background-position: center top;
    background-repeat: repeat-y;
    border:solid 1px red;
    position:absolute;
    text-align:center;
    top:0px;
    bottom:0px;
}
#contentDiv {
    width: 800px;
    margin: 0 auto;
    background-color: #DADADA;
    border:solid 1px blue;
    position:absolute;
    text-align:center;
    left:100px;
    top:100px;
    float:left;
}
</style>
</head>

<body>
<div id=wrapper>
    <div id="parentDiv">
        <div id="contentDiv">

            <p>Paragraphs of text...</p>
                        <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>            <p>Paragraphs of text...</p>       
        </div>
                <div style="clear:both;" ></div>
    </div>
    <div style="clear:both;" ></div>
    </div>
</body>

I found your code to work pretty well with 3 caveats: