Reputation: 99
100% height of element not working
I want to make the .contents and .root height 100% I did every try but did not achieved the expectation.
here is the HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Dashboard | The Design In - The Pure CMS</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar navbar-fixed-top navbar-top"><img src="images/logo.png" width="171" height="40" alt="ThePureCMS">
</div>
<div class="sidebar">aaa</div>
<div class="root">
<div class="contents">
<div class="clearfix"></div>
<!-- BODY END -->
</div>
<footer>
<div>copyrights 2013 | The Design In | www.thedesignin.com</div>
</footer>
</div>
</body>
</html>
and CSS
@charset "utf-8";
body, hrml {
background-color: #efefef;
width: 100% !important;
min-height: 100% !important;
margin: 0;
padding: 0;
}
.root {
margin: 0px;
padding: 0px;
width: 100% !important;
min-height: 500px !important;
float: left;
}
.navbar-top {
background-image: url(../images/nav_bg.png);
background-repeat: repeat-x;
background-position: left top;
min-height:40px !important;
margin:0 !important;
padding: 0 !important;
}
.sidebar, .contents{
height: auto;
min-height:100%;
padding-top:40px;
}
.sidebar{
width:171px;
float:left;
background-color:#2e3b81;
position:fixed;
}
.contents {
margin-left: 171px;
display: block;
background-color: #fafafa;
padding:16px;
padding-top:56px;
padding-bottom:71px;
}
footer {
width:100%;
margin-left:0;
position:relative;
padding:0;
bottom:0;
color:#d5d5d5;
background-color:transparent;
}
footer div {
margin-right:16px;
margin-left:187px;
margin-top:-55px;
margin-bottom:16px;
padding-top:12px;
padding-bottom:11px;
color:#2e3b81;
background:url(../images/footer_bg.png) repeat-x left top;
font-size:11px;
}
Please help me to make the container height 100%. I dont want to use the javascript or jquery.
Long time ago I did achieved the height 100%, but dont know am I doing mistake this time....
Upvotes: 0
Views: 106
Answers (3)
Reputation: 6793
Change <html><body> to <html height="100%"><body height="100%">
I have just set the background color of root to red color.Scroll down and see that it is of the same height as of the window:
Fiddle for what you asked in the comment:
After removing padding:
Upvotes: 0
Reputation: 1853
You will need to give your body tag some sort of tangible height for the children to be 100%.
Upvotes: 1
Reputation: 17620
in your example, you have body, hrml {. You might want to make that html
Upvotes: 0