Question

我正在尝试根据页面上.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;
}

Answer 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;
}

父DIV根据内部内容扩展的高度

1 个答案: