this must be a previously-answered question, but i’m unable to find an answer that covers it.
the html/css below does a couple of things i find strange, and it does them in FF4/5, Chrome 12, and Safari 5, so at least this strangeness is consistent across browsers.
the strangeness in question:
- the body element, with height:100%,
stops at the bottom of the browser
window. scrolling down reveals the
white <html> beneath the grey
<body>. - the blue <contentBorder> also stops at the bottom of the browser window.
both these, despite being contained, all the way up the DOM, in elements with height:100%. apologies if this question has already been answered, and thanks for directing me to a descriptive explanation of what’s happening here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simple height test</title>
<style type="text/css">
html, body {
border: 0px;
margin: 0px;
height: 100%;
}
html {
background-color: #FFFFFF;
}
body {
background-color: #999999;
}
#contentBorder {
width: 20px;
height: 100%;
background-color: #666699;
float: left;
}
#contentContainer {
width: 200px;
height: 1000px;
background-color: #333333;
}
</style>
</head>
<body>
<div id="contentBorder"></div>
<div id="contentContainer"></div>
</body>
</html>
Specifying the height for
bodyandhtmlas 100% will set them to be 100% of the browser window’s height. If you want the background to fill the total vertical height of the page, then it should work if you removeheight: 100%from the first CSS block.