Expand div height to fit parent

[diabolo]

<div class="singlewhiteBox_body floatContainer" id="textbook">
            <script>
               $(document).ready(function() {                
                  $('.row, .lastRow').hover(function() {
                     var ID = $(this).attr('id');
                     //alert(ID);
                     $('#'+ID+' .class').toggleClass('class_hover');
                  }, function() {
                     var ID = $(this).attr('id');
                     $('#'+ID+' .class').toggleClass('class_hover');
                  });
                  
                  $('.chapter').hover(function() {
                     $(this).toggleClass('chapter_hover');
                  }, function() {
                     $(this).toggleClass('chapter_hover');
                  });
               });
            </script>
         <div class="left">
            <div class="row" id="CK1">
               <div class="class">CK1</div>
               <div class="chapterContainer">
                  <a href=""><span class="chapter">二十二 &nbsp;至&nbsp; 二十三</span></a>
                  <a href=""><span class="chapter">二十二 &nbsp;至&nbsp; 二十三</span></a>
                  <a href=""><span class="chapter">二十二 &nbsp;至&nbsp; 二十三</span></a>
                  <a href=""><span class="chapter">二十二 &nbsp;至&nbsp; 二十三</span></a>           
               </div>
            </div>
            <div class="lastRow" id="CK2">
               <div class="class">CK2</div>
               <div class="chapterContainer">
                  <a href=""><span class="chapter">二十二 &nbsp;至&nbsp; 二十三</span></a>
                  <a href=""><span class="chapter">二十二 &nbsp;至&nbsp; 二十三</span></a>
                  <a href=""><span class="chapter">二十二 &nbsp;至&nbsp; 二十三</span></a>
                  <a href=""><span class="chapter">二十二 &nbsp;至&nbsp; 二十三</span></a>           
               </div>
            </div>
         </div>
         <div class="right">
            
         </div>
         </div>

#textbook .left, #textbook .right {
   border: 1px solid #777777;
   border-top: 4px solid #777777;
   border-bottom: 4px solid #777777;
   width: 49%;
}
#textbook .row, #textbook .lastRow {
   width: 100%;
   text-align: center;
   padding-bottom: 0; /* ALERT */
   border-bottom: 2px solid #777777;
   color: #000000;
}
#textbook .lastRow {
   border: 0;
}
#textbook .row:hover, #textbook .lastRow:hover {
   background: #ffd899;
}
#textbook .row .class, #textbook .lastRow .class {
   width: 55px;
   height: 100%;
   position: relative;
   font-size: 20px;
   border-right: 2px dashed #777777;
   margin-right: 10px;
   float: left;
}
#textbook .row .chapterContainer, #textbook .lastRow .chapterContainer {
   width: 362px;
   float: right;
   text-align: left;
}
#textbook .row .chapterContainer a, #textbook .lastRow .chapterContainer a {
   text-decoration: none;
}
#textbook .row .class_hover, #textbook .lastRow .class_hover {
   background: #FF9900;
   border-right: 2px dashed #FFFFFF;
   color: #FFFFFF;
}
#textbook .row .chapter, #textbook .lastRow .chapter, #textbook .row .chapter a, #textbook .lastRow .chapter a, #textbook .row .nochapter, #textbook .lastRow .nochapter {
   text-decoration: none;
   width: 124px;
   height: 19px;
   margin-right: 2px;
   color: #000000;
}
#textbook .row .chapter_hover, #textbook .lastRow .chapter_hover, #textbook .row .chapter_hover a, #textbook .lastRow .chapter_hover a {
   background: #FF9900;
   color: #FFFFFF;
}

How do I get div.class to expand to the full height of div.row and div.lastRow?

 

[misson]

In this case, I'd position them absolutely behind the .chapterContainer (actually, given that the .chapterContainer are floated, you don't need to worry too much about the "behind"). Note there are some other fixes that need to be made:

#textbook .row /* Not bothering with .lastRow (see recommendation below) */ { 
    position: relative; /* create new containing block for .chapterContainer */
    overflow: auto; /* contain floated children */
}

/* Damn you, IE 6. Why won't you let me use child selectors? */
#textbook .row /* > */ div.class {
    position: absolute;
    top: 0;
    left: 0;
    /* in IE6, setting "bottom" won't work, so set "height" instead. */
    height: 100%;
}
#textbook .chapterContainer {
    position: relative;
    z-index: 1;
}

I also recommend adding a "row" class to .lastRow, so you don't need to target .row and .lastRow separately (notionally, a .lastRow is also a .row, so it should have both classes). Once you don't have to support IE6, you can drop the .lastRow completely, and use .row:last-child whenever you need to select the last row.

 

[diabolo]

once again, thanks misson!

I just made a few tweaks to prevent a scroll bar from popping up so I can add a margin-top to .class

/* TEXTBOOK (#textbook) */
#textbook .left, #textbook .right {
   border: 1px solid #777777;
   border-top: 4px solid #777777;
   border-bottom: 4px solid #777777;
   width: 49%;
}
#textbook .row {
   width: 100%;
   text-align: center;
   padding-bottom: 0; /* ALERT */
   border-bottom: 2px solid #777777;
   color: #000000;
   position: relative;
   overflow: hidden;
}
#textbook .lastRow {
   border: 0;
}
#textbook .row:hover, #textbook .lastRow:hover {
   background: #ffd899;
}
#textbook .row .class, #textbook .lastRow .class {
   width: 55px;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   font-size: 20px;
   border-right: 2px dashed #777777;
   margin-right: 10px;
   padding-top: 10px;
   float: left;
}
#textbook .row .chapterContainer, #textbook .lastRow .chapterContainer {
   width: 362px;
   min-height: 40px;
   float: right;
   text-align: left;
   position: relative;
   z-index: 1;
   padding: 5px 0 5px 0;
}
#textbook .row .chapterContainer a, #textbook .lastRow .chapterContainer a {
   text-decoration: none;
}
#textbook .row .class_hover, #textbook .lastRow .class_hover {
   background: #FF9900;
   border-right: 2px dashed #FFFFFF;
   color: #FFFFFF;
}
#textbook .row .chapter, #textbook .lastRow .chapter, #textbook .row .chapter a, #textbook .lastRow .chapter a, #textbook .row .nochapter, #textbook .lastRow .nochapter {
   text-decoration: none;
   width: 124px;
   height: 19px;
   margin-right: 2px;
   color: #000000;
}
#textbook .row .chapter_hover, #textbook .lastRow .chapter_hover, #textbook .row .chapter_hover a, #textbook .lastRow .chapter_hover a {
   background: #FF9900;
   color: #FFFFFF;
}

+REP