我想使.contents和.root高度達到100% 我盡力而爲,但沒有達到預期效果。100%高度的元素不能正常工作
這裏是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>
和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;
}
請幫助我,使容器高度100%。 我不想使用JavaScript或jQuery。
很久以前我沒有在你的榜樣達到的高度爲100%,但不知道我在做錯誤的這個時候....
html和身體運作良好,只有.root不是除了高度 – user3034390
這是工作。我將發佈小提琴 – Zword
好吧,我正在等待小提琴。請嘗試 – user3034390