Hi,
New post on a realy acient subject: the DIV Height 100%.
I've managed (see code below) to have in all browser a div with width and height 100% and a nice red border of 30px without any scrollbars...
Excuse me, almost without scrollbars.
By putting the CSS3 valid proprety (box-sizing: border-box;) on the DIV you can maintain the strict DOCTYPE and calculate boxes on the "old-but-more-intuitive" way (width & height = content+padding+border+margin) => see boxing model.
With this solution you have multiple problems (and solutions: yeeey!)
1.box-sizing isn't supported by... IE.
=> solution: put a comment tag aboce the DOCTYPE tag to make IE go in Quirks mode.
2.box-sizing isn't supported by mozilla-based browsers.
=> solution: put "-moz-box-sizing: border-box" in the CSS
Now you think: haha, what's your problem.
Well on all IE versions (4 till 7) and in FF 2.0 no vertical scrollbars are showed (as supposed to) but all other browsers (Netscape 8 , Opera 9...) there is a scrollbar and you can scroll +- 30px more to the bottom than the supposed 100% heigth, and you see the bottom of the body.
here is the HTML Markup:
Code:
<!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 runat="server">
<link href="DIVStylesheet.css" rel="stylesheet" type="text/css" />
<title>DIV Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="_divTest" class="TestDiv">
<span style="color: #ffffff">Dit is een DIV </span></div>
</form>
</body>
</html>
CSS code:
Code:
html
{
height: 100%;
margin: 0px;
}
body
{
height: 100%;
margin: 0px;
background-color: gray;
}
.TestDiv
{
margin: 0px;
border: solid 10px red;
width: 100%;
background-color: blue;
height: 100%; /* voor IE */
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box; /* voor moderne browsers behalve IE */
-moz-box-sizing: border-box; /* voor mozilla-based browsers (netscape, FF ...) */
}
in like 2 second you can paste this in a new WebApp/WebSite project and see it for yourself.
Has anyone any idea from where those differences come and how they are to be "fixed"? Thx for all help!
Grtz
Lawrence
Crossbrowser DIV Height 100% problems
