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:
<!DOCTYPE html><-- big difference in behavior vs no declaration- #parentDiv, #contentDiv { ... height: 100% ... }
- FireFox
加载中,请稍侯......
精彩评论