Parent DIV Height to expand based on inner content

Question

I'm trying to set the height of .background based on the number of .slice elements on the page. I know the inner elements being floated left doesn't help but I'm not sure how to solve this.

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

Yes, I've tried all of those answers. Still having issues. Will try again now. — user1381806, Jun 04 '14 at 00:34
What have you tried? Fiddles? Why didn't they work? Put your attempted solutions in the question. — bjb568, Jun 04 '14 at 00:35
Correct. I can see that #main-nav and .background add extra padding/margin to the bottom; so i'm trying to see how to get rid of the extra spacing :-) — user1381806, Jun 04 '14 at 00:49
Not an answer, but I replicated your fiddle without scripts: http://jsfiddle.net/Mpdfz/ — bjb568, Jun 04 '14 at 01:21

score 0 · Answer 1 · edited May 23 '17 at 10:32

Managed to do it; deleted the layout and started again.

The main thing was to set overflow hidden on the master div and give it a min-height.

Followed the answers here: 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;
}

Parent DIV Height to expand based on inner content

1 Answers1