Question

我想将.contents和.root高度设为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％的高度，但这次我不知道我做错了....

Answer 1

你需要给身体标签一些有形的高度，让孩子们达到100％。

Answer 2

在您的示例中，您有body, hrml {。您可能想要html

Answer 3

将<html><body>更改为<html height="100%"><body height="100%">

我刚刚将root的背景颜色设置为红色。向下滚动，看到它与窗口的高度相同：

http://jsfiddle.net/wJ2Tx/2/

在评论中提出的问题：

http://jsfiddle.net/7VmQW/1/

删除填充后：

http://jsfiddle.net/7VmQW/8/

100％高度的元素不起作用

3 个答案: