如何改變 <div> 內容擴展時的高度？

Question

我正在尋找一種方法，當內容擴展時（如在手風琴菜單中一樣），將圍繞某些內容擴展<div>

手風琴菜單位於帶有邊框的div中。 手風琴菜單中的每個下拉菜單都將包含一個圖像滑塊。

問題在於，當每個下拉列表擴展時，div保持相同的高度。 有沒有一種方法可以圍繞<div>所包含的任何擴展內容進行擴展？

這是我的手風琴菜單和手風琴下拉菜單中的圖像滑塊的div ...

<div id="contentbox">

        <div id="st-accordion" class="st-accordion">
            <ul>
                <li>
                    <a href="#">
                        Sculpture
                        <span class="st-arrow">Open or Close</span>
                        </a>
                        <div class="st-content">
        <div class="slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
    <img src="images/crab.jpg" width="100"/>
</label>
<img src="images/crab.jpg"/>

<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
    <img src="images/dragon.jpg" width="100"/>
</label>
<img src="images/dragon.jpg"/>

<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
    <img src="images/oct.jpg" width="100"/>
</label>
<img src="images/oct.jpg"/>

<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
    <img src="images/octo.jpg" width="100"/>
</label>
<img src="images/octo.jpg"/>

<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
    <img src="images/shark.jpg" width="100"/>
</label>
<img src="images/shark.jpg"/></div></div></li></div>

這是內容框我的CSS代碼的示例...

#contentbox {
z-index: 99999;
background-color:#000000; 
border: 2px solid red;
-moz-border-radius: 50px;
border-radius: 50px;
width:80%;
height:auto;
position: absolute;
top:100px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

這是手風琴菜單的CSS ...

.wrapper{
width:90%;
max-width:800px;
margin:30px auto;
}
.st-accordion{
width:100%;
min-width:270px;
margin: 0 auto;
}
.st-accordion ul li{
height: 100px;
border-bottom: 1px solid #c7deef;
border-top:1px solid #fff;
overflow: hidden;
}
.st-accordion ul li:first-child{
border-top:none;
}
.st-accordion ul li > a{
font-family: 'Josefin Slab',Georgia, serif;
text-shadow: 1px 1px 1px #fff;
font-size: 46px;
display: block;
position: relative;
line-height: 100px;
outline:none;
-webkit-transition:  color 0.2s ease-in-out;
-moz-transition:  color 0.2s ease-in-out;
-o-transition:  color 0.2s ease-in-out;
-ms-transition:  color 0.2s ease-in-out;
transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a span{
background: transparent url(../images/down.png) no-repeat center center;
text-indent:-9000px;
width: 26px;
height: 14px;
position: absolute;
top: 50%;
right: -26px;
margin-top: -7px;
opacity:0;
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
-ms-transition:  all 0.2s ease-in-out;
transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
color: #1693eb;
}
.st-accordion ul li > a:hover span{
opacity:1;
right: 10px;
}
.st-accordion ul li.st-open > a{
 color: #1693eb;
}
.st-accordion ul li.st-open > a span{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);
right:10px;
opacity:1;
}
.st-content{
padding: 5px 0px 30px 0px;
}
.st-content p{
font-size:  16px;
font-family:  Georgia, serif;
font-style: italic;
line-height:  28px;
padding: 0px 4px 15px 4px; 
}
.st-content img{
width:125px;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
@media screen and (max-width: 320px){
.st-accordion ul li > a{
    font-size:36px;
}
}

這是圖像滑塊的CSS（感謝您提供的所有幫助，如果您實際到此為止）

.slider{
width: 640px; /*Same as width of the large image*/
position: relative;
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/

margin: 100px auto;

/*Lets add a shadow*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}

.slider input[name='slide_switch'] {
display: none;
}

.slider label {
/*Lets add some spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;

float: left;
cursor: pointer;
transition: all 0.5s;

/*Default style = low opacity*/
opacity: 0.6;
}

.slider label img{
display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}

Answer 1

也許您可以嘗試

.st-accordion ul li{
height: auto;
min-height: 100px;
}