當div div通過jQuery展開時div不移動slideToggle

Question

當我的slideToggle div展開時，內容覆蓋它下面的div（.fragHeader）而不是將其壓下。我爲擴展div（.fragListMoreText）添加了一個巨大的200px底部邊距（爲了好玩），並且.fragHeader保持原位，而它下面的div（.fragNav）被適當移動。這裏是有問題的網頁的鏈接（我已經消除了爲200px保證金）：

http://mentalwarddesign.net/Andrea/Fragrances/baked.html

jQuery的工作正常，所以我將不包括代碼，但這裏的相關CSS：

.fragListShowHide { 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 11px; 
    line-height: 18px; 
    font-weight: normal; 
    color: #009b7b; 
    width: 520px; 
    height: 72px; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: #ffffff; 
} 
.fragListMoreText { 
    width: 520px; 
    display: none; 
    margin-left: -10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    background-color: #ffffff; 
} 
.changeTextButtonFrag { 
    display: block; 
    cursor: pointer; 
    float: right; 
    margin-right: -10px; 
} 

.fragHeader { 
    background-color: #FFF; 
    width: 528px; 
    padding-top: 10px; 
    padding-right: 5px; 
    padding-left: 10px; 
    margin-top: 30px; 
    padding-bottom: 5px; 
} 
.fragNav { 
    height: 116px; 
    width: 543px; 
    background-image: url(../Fragrances/imgFrag/navFragrance.jpg); 
    -webkit-border-bottom-right-radius: 8px; 
    -moz-border-radius-bottomright: 8px; 
    -o-border-bottom-right-radius: 8px; 
    border-bottom-right-radius: 8px; 
    overflow: hidden; 
    float: left; 
    background-repeat: no-repeat; 
    margin-bottom: 10px; 
} 

這裏是影響該區域的HTML：

 <div class="fragListShowHide" id="baked">ANGEL FOOD CAKE | APPLE CRISP | APPLE PIE | BAKED BREAD | BANANA CREAM PIE | BANANA NUT BREAD | BLUEBERRY CHEESECAKE | BLUEBERRY MUFFIN | BLUEBERRY PIE | CARROT CAKE | CHERRY COBBLER | CINNAMON BUNS | CINNAMON TOAST | COOKIE | DONUT | FUDGE BROWNIE | GINGERBREAD | GINGERSNAP | GRAHAM CRACKERS | KEY 
     <div class="fragListMoreText">LIME PIE | LEMON MERINGUE | NUT BREAD | NUT CAKE | PEACH COBBLER | PINEAPPLE UPSIDE DOWN CAKE | PLUM PUDDING | PUMPKIN PIE | SEX ON THE BEACH | SNICKER DOODLE | STRAWBERRY | CHEESECAKE | SUGAR COOKIE | VANILLA WAFER | WEDDING CAKE 
     <!-- end .fragListMoreText --></div> 
     <img src="../imgGlobal/more-button.png" width="51" height="16" class="changeTextButtonFrag" alt="textButton"> 
     <!-- end .fragListShowHide --></div> 
    <div class="fragHeader"> 
     <h2>OUR FRAGRANCE CATEGORIES</h2> 
     <p>Andrea Aromatics' custom fragrance categories are designed around familiar olfactory themes. With hundreds of individual fragrances overall, we cover practically every scent under the sun.</p> 
     <!-- end .fragHeader --></div> 
    <div class="fragNav" style="left: 101px; top: 265px;"> 
     <div class="fragNavRow1"><ul class="frag"> 
     <li class="chosenSub"><a href="../Fragrances/baked.html">Baked Goods</a></li> 
     <li><a href="../Fragrances/floral.html">Florals</a></li> 
     <li><a href="../Fragrances/nuts.html">Nuts</a></li> 
     </ul> 
     <!-- end .fragNavRow1 --></div> 
     <div class="fragNavRow2"><ul class="frag"> 
     <li><a href="../Fragrances/beverage.html">Beverage</a></li> 
     <li><a href="../Fragrances/fruit.html">Fruits</a></li> 
     <li><a href="../Fragrances/outdoor.html">Outdoor</a></li> 
     </ul> 
     <!-- end .fragNavRow2 --></div> 
     <div class="fragNavRow3"><ul class="frag"> 
     <li><a href="../Fragrances/designer.html">Designer</a></li> 
     <li><a href="../Fragrances/holiday.html">Holiday</a></li> 
     <li><a href="../Fragrances/spiceherb.html">Spice & Herb</a></li> 
     </ul> 
     <!-- end .fragNavRow3 --></div> 
     <div class="fragNavRow4"><ul class="frag"> 
     <li><a href="../Fragrances/exotic.html">Exotic</a></li> 
     <li><a href="../Fragrances/novelty.html">Novelty</a></li> 
     <li><a href="../Fragrances/trees.html">Trees</a></li> 
     </ul> 
     <!-- end .fragNavRow3 --></div> 
     <!-- end .fragNav --></div> 

感謝任何及所有對你有所幫助！

Answer 1

您已經硬編碼父元素的高度（fragListShowHide），因此即使顯示嵌套元素，父容器div的高度仍然爲72，這意味着無法移動以容納較大的內容。

從fragListShowHide中移除絕對高度或移除fragListMoreText。

如果您使用螢火蟲，並查看div大小，您可以清楚地看到發生了什麼。

Answer 2

不知道，但嘗試改變

.fragListShowHide { 
    .... 
    height: auto; 
} 

我認爲，應該幫助。