2013-12-03 65 views
0

我想使.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%,但不知道我在做錯誤的這個時候....

回答

0

變化<html><body><html height="100%"><body height="100%">

我剛纔設置的根的背景色爲紅色color.Scroll下來,看到它是在同一高度,作爲窗口:

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

小提琴你在評論中提出的問題:

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

移除填充後:

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

+0

html和身體運作良好,只有.root不是除了高度 – user3034390

+0

這是工作。我將發佈小提琴 – Zword

+0

好吧,我正在等待小提琴。請嘗試 – user3034390

0

,你有body, hrml {。你可能想要做到這一點html

+0

感謝您的快速回答,我已經嘗試了這一點。不工作:( – user3034390

1

你需要給你的身體標籤某種形式的高度,讓孩子100%。

+0

是的 - 不是''min-height'在你的'body,html'指令中,試試'height:100%'。 – PaulProgrammer

+0

沒有找到你。請給我多一些解釋,請 – user3034390

+0

不工作。嘗試身高:100% – user3034390