Css height in percent not working
HtmlCssHtml Problem Overview
I have the following simple code:
<!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" xml:lang="en">
<head>
<title>Live Feed</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
I should be tall
</div>
</body>
</html>
But the div doesn't get displayed with height being 100%. Why?
Html Solutions
Solution 1 - Html
You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
<html><body><div></div></body></html>
Solution 2 - Html
Make it 100% of the viewport height:
div {
height: 100vh;
}
Works in all modern browsers and IE>=9, see here for more info.
Solution 3 - Html
height: 100% works if you give a fixed size to the parent element.
Solution 4 - Html
You can achieve that by using positioning.
Try
position: absolute;
to get the 100% height.
Solution 5 - Html
You need to set 100% height on the parent element.
Solution 6 - Html
Add height:100% to body
body{height:100%}
Solution 7 - Html
This is what you need in the CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
}
Solution 8 - Html
the root parent have to be in pixels if you want to work freely with percents,
<body style="margin: 0px; width: 1886px; height: 939px;">
<div id="containerA" class="containerA" style="height:65%;width:100%;">
<div id="containerAinnerDiv" style="position: relative; background-color: aqua;width:70%;height: 80%;left:15%;top:10%;">
<div style="height: 100%;width: 50%;float: left;"></div>
<div style="height: 100%;width: 28%;float:left">
<img src="img/justimage.png" style="max-width:100%;max-height:100%;">
</div>
<div style="height: 100%;width: 22%;float: left;"></div>
</div>
</div>
</body>