<分区>
<分区>
我试图根据页面上 .slice 元素的数量设置 .background 的高度。我知道向左浮动的内部元素没有帮助，但我不确定如何解决这个问题。
JSFiddle http://jsfiddle.net/8ryAD/
HTML
<div class="master">
<a id="btn-nav">
<span></span>
<span>Menu</span>
<span></span>
</a>
<nav id="main-nav">
<div class="background">
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
</div>
</nav>
</div><!-- end master -->
CSS
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
body {
background: #2980b9;
font-family: 'Droid Sans', sans-serif;
}
#btn-nav {
position:absolute;
left:10px;
top:10px;
width:30px;
height:30px;
display:block;
z-index:1;
}
#btn-nav:hover {
cursor:pointer;
}
#btn-nav span:nth-child(2) {
top:10px;
}
#btn-nav span:nth-child(3) {
top:20px;
}
#btn-nav span {
height: 4px;
width: 30px;
background: white;
content: "";
text-indent: -999em;
display:inline-block;
position:absolute;
zoom: 1;
top:0px;
left:0px;
text-align:center;
-webkit-transition: top .3s cubic-bezier(0.165,.84,.44,1);
-webkit-transform: rotate(0deg);
}
#btn-nav:hover > span, #btn-nav.open > span {
top:10px;
}
#btn-nav.open > span:nth-child(1) {
-webkit-animation: rotateAni .2s .1s forwards, expandAni .3s .3s forwards;
}
#btn-nav.open > span:nth-child(2) {
-webkit-animation: rotateAni .2s .1s forwards, expandAni-2 .3s .3s forwards;
}
#btn-nav.open > span:nth-child(3) {
-webkit-animation: rotateAni .2s .1s forwards, expandAni-3 .3s .3s forwards;
}
@-webkit-keyframes rotateAni {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(90deg);}
}
@-webkit-keyframes expandAni {
0% {left:0;}
100% {left:-10px;}
}
@-webkit-keyframes expandAni-2 {
0% {left:0;}
100% {left:0px;}
}
@-webkit-keyframes expandAni-3 {
0% {left:0;}
100% {left:10px;}
}
#main-nav {
position:fixed;
left:0;
top:0;
display:block;
width:100%;
height:100%;
z-index:-1;
}
.slice {
width:25%;
height:30%;
min-height:30%;
float:left;
background:black;
opacity:0;
-webkit-transition: 1s;
}
.background {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
}
最佳答案
设法做到了；删除布局并重新开始。
最主要的是设置隐藏在主 div 上的溢出并给它一个最小高度。
遵循此处的答案:Expanding a parent <div> to the height of its children
#master {
background: #000;
height: auto;
min-height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
#main-nav {
left: 0;
position: absolute;
top: 0;
display: block;
height: 100%;
position: fixed;
width: 100%;
z-index: -1;
}
.slice {
background: #000;
float: left;
height: 33.66%;
opacity: 0;
filter: alpha(opacity=0);
width: 25%;
-webkit-transition: 1s;
}
关于html - Parent DIV 高度根据内部内容展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24027178/