2016-03-06 103 views
1

我無法在整個塊div內安裝任何數量的內容,我嘗試將高度設置爲自動,但無法使用,我試過了溢出屬性沒有工作。我想要在有更多內容時擴展整個div高度,因爲我正在動態更改內容,但我不理解爲什麼整個div高度沒有擴大,因爲它裏面有更多內容。下面是例子。

請提供詳細解釋爲什麼div高度沒有擴大。如何適應div內的內容

#entire-block { 
 
    bottom: 50px; 
 
    box-shadow: rgb(159, 159, 155) 4px 4px 4px -1px; 
 
    box-sizing: border-box; 
 
    /*  min-height: 136px; */ 
 
    height: auto; 
 
    position: fixed; 
 
    overflow: ; 
 
    right: 0px; 
 
    width: 370px; 
 
    z-index: 999; 
 
    background: rgb(215, 215, 210) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    font: normal normal normal 16px/16px'Times New Roman'; 
 
    padding: 10px 10px 13px; 
 
} 
 
/*#DIV_1*/ 
 

 
#A_2 { 
 
    box-sizing: border-box; 
 
    color: rgb(255, 255, 255); 
 
    cursor: pointer; 
 
    display: none; 
 
    left: 5px; 
 
    position: fixed; 
 
    text-decoration: none solid rgb(255, 255, 255); 
 
    top: 43px; 
 
    z-index: 999; 
 
    border: 0px none rgb(255, 255, 255); 
 
    font: normal normal normal 25px/25px'Source Sans Pro ExtraLight'; 
 
    outline: rgb(255, 255, 255) none 0px; 
 
} 
 
/*#A_2*/ 
 

 
#x { 
 
    box-sizing: border-box; 
 
    color: rgb(255, 255, 255); 
 
    cursor: pointer; 
 
    display: block; 
 
    float: right; 
 
    height: 44px; 
 
    text-decoration: none solid rgb(255, 255, 255); 
 
    width: 21px; 
 
    border: 0px none rgb(255, 255, 255); 
 
    font: normal normal normal 44px/44px'Source Sans Pro ExtraLight'; 
 
    margin: -11px 0px 0px; 
 
    outline: rgb(255, 255, 255) none 0px; 
 
} 
 
/*#A_3*/ 
 

 
#entire-content-section { 
 
    box-sizing: border-box; 
 
    height: 113px; 
 
    width: 350px; 
 
    font: normal normal normal 16px/16px'Times New Roman'; 
 
} 
 
/*#DIV_4*/ 
 

 
#IMG_5 { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    float: left; 
 
    height: auto; 
 
    width: 40px; 
 
    font: normal normal normal 16px/16px'Times New Roman'; 
 
    margin: 0px 10px 0px 0px; 
 
} 
 
/*#IMG_5*/ 
 

 
#top-content-section { 
 
    box-sizing: border-box; 
 
    height: 90px; 
 
    width: 350px; 
 
    font: normal normal normal 16px/16px'Times New Roman'; 
 
} 
 
/*#DIV_6*/ 
 

 
#content-header { 
 
    box-sizing: border-box; 
 
    height: 56px; 
 
    width: 350px; 
 
    font: normal normal normal 28px/28px league_gothicregular; 
 
    margin: 0px; 
 
    padding-top: 1%; 
 
} 
 
/*#H3_7*/ 
 

 
#middle-content { 
 
    box-sizing: border-box; 
 
    font: normal normal normal 16px/16px'Source Sans Pro'; 
 
} 
 
/*#SPAN_8*/ 
 

 
#content-bottom { 
 
    box-sizing: border-box; 
 
    color: rgb(0, 173, 237); 
 
    cursor: pointer; 
 
    display: block; 
 
    height: 12px; 
 
    letter-spacing: 1.6799999475479126px; 
 
    text-decoration: none solid rgb(0, 173, 237); 
 
    text-transform: uppercase; 
 
    width: 350px; 
 
    border: 0px none rgb(0, 173, 237); 
 
    font: normal normal normal 12px/12px'Source Sans Pro Black'; 
 
    margin: 11px 0px 0px; 
 
    outline: rgb(0, 173, 237) none 0px; 
 
} 
 
/*#A_11*/
<div id="entire-block"> 
 
    <a id="x">×</a> 
 
    <div id="entire-content-section"> 
 
    <img src="http://www.ratemyprofessors.com/assets/average-icon-b4b6eb5e309d26486d76ecebe920220f.jpg?1455038037" id="IMG_5" alt='' /> 
 
    <div id="top-content-section"> 
 
     <h3 id="content-header"> 
 
Average 
 
\t \t \t </h3> <span id="middle-content">Attending class is not necessary, but reading the textbook is a must. I attended all of his classes for ECON1000 but didn't find it helpful, so I never went to class for ECON1010. Do your readings and study from the test banks. With some effort, you're guaranteed to get an A. Would take his class again.</span> 
 
    </div> 
 
    <a href="http://bit.ly/1WuCmqL" id="content-bottom">Find out what students are saying.</a> 
 
    </div> 
 
</div>

回答

1

你有固定的,這就是爲什麼它顯示固定高度的高度。從#entire-content-section and #top-content-section刪除高度。

+0

這是正確的,我現在已經解剖了代碼片,發現#top-content-section和#entire-content-section height被修復,導致問題非常感謝! –