Menu
When I use HTML without DOCTYPE, my HTML page Height=100% is working.
But when I use DOCTYPE, height is not working correctly...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="11" height ="100%">
<tr>
<td height="100%" bgcolor="#008000"> </td>
</tr>
</table>
</body>
How to solve this problem?
761
Setting min-height to 100% on both elements does not allow the body element to fill the page like you might expect. If you check the computed style values in dev tools, the body element has a height of zero. Meanwhile, the HTML element has a height equal to the visible part of the page in the browser.
Try setting the height of the html element to 100% as well. Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
It just means 100% of the div or class or tag it is enclosed within.
By default, both the html element and body element have their height CSS property set to auto. This means they don't have an explicit height out of the box. They'll either take up whatever height they are told to be, or they will take up whatever height of the content that is inside them.
Adding a DOCTYPE switches you from quirks mode to standards mode. In standards mode, the html and body elements do not default to 100% of the size of the viewport (browser window); instead, they are only as large as they need to be to contain their children. The table height of 100% means 100% of the containing element, but that's only as large as it needs to be to contain the contents of the table. Quirks mode is an emulation of the behavior of older browsers, in which the html and body elements filled the viewport.
To fix the problem, you just need to add this to your document:
<style>
html, body { height: 100% }
</style>
When you state 'height=100%' you have to think "100% of what?". It's the parent of that table element which is the body. But how tall is the body?
To do what you want, add this in the CSS: html,body{height:100%}
23
Like everyone said the main part of the solution is to put
html, body{'height=100%'}
But its also really important to set every single ancestor's height to be 100%. for example if your code is as follows
<body>
<div id="firstdiv">
<div id="scnddiv">
lets say this is the div you want to make 100%
</div>
</div>
</body>
if #scnddiv is the div you want to make 100%, not only you have to make html and body 100% but also #firstdiv. So it will look something like this
html, body, #firstdiv {height:100%}
then you can make anything in that div to be 100%.
I hope this helps.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
