2016-03-06 78 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被修复,导致问题非常感谢! –