高度100%适用于某些div,而其他则不适用(容器)。 高度100%适用于Menu_left div但在容器中不起作用。 我不知道为什么在该div中将高度设置为100%并不起作用。
这是我的HTML代码:
<body>
<div class="All clearfix">
<div class="Menu_left">Menu</div>
<div class="Container_right">Container</div>
</div>
</body>
我的css:
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,q,s,strong,sub,sup,tt,var,b,u,i,center,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,footer,header,menu,section{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
.clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
html{
padding:0;
margin:0;
height:100%;
min-height:100%;
}
body{
padding:0;
margin:0;
height:100%;
min-height:100%;
-webkit-background-size:cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
.All{
width:100%;
height:auto;
min-height:100%;
position:relative;
overflow:hidden;
background-color:rgb(35,31,32) ;
}
.Menu_left_float{
float:left;
background:blue;
width:340px;
height:100%;
}
.Menu_left{
position:fixed;
top:0px;
left:0px;
width:340px;
height:100%;
background-color:#F0F;
}
.Container_right{
position:relative;
background-color:#00F;
min-height:100%;!important
height:100%;
margin:0 0 0 340px;
}
答案 0 :(得分:3)
http://jsbin.com/jezoqume/1/edit
.All
高度为1px
,它会起作用。
欢呼声。
答案 1 :(得分:0)
添加位置:固定而不是位置:相对,它正在工作。
.Container_right{
/*position:relative;*/
position:fixed;
background-color:#00F;
min-height:100%;!important
height:100%;
margin:0 0 0 340px;
}
答案 2 :(得分:0)
您的位置:已修复导致此问题。当您申请固定头寸时,您取得了整个方面的所有权。
摆脱固定的位置,你会看到。为了更有趣,给另一个div一个固定的位置,你会看到这样做!
这一切都在位置上。
因此要么将它们固定,要么使用相对位置的自动高度。你会没事的。