父DIV高度根据内部内容扩展[重复]答案

【问题标题】：Parent DIV Height to expand based on inner content [duplicate]父DIV高度根据内部内容扩展[重复]
【发布时间】：2014-07-24 11:56:56
【问题描述】：

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

【问题讨论】：

是的，我已经尝试了所有这些答案。还是有问题。现在会再试一次。
你试过什么？小提琴？为什么他们不工作？将您尝试的解决方案放在问题中。
我已经在上面添加了一个小提琴。
所以你想把它裹在孩子身上？
不是答案，但我在没有脚本的情况下复制了您的小提琴：jsfiddle.net/Mpdfz

标签： html css

【解决方案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;
}

【讨论】：