Question

我在整个块div中装入任何数量的内容时遇到了麻烦，我试图将高度设置为auto然而这不起作用，我尝试了溢出属性但是效果不好。当有更多内容时，我希望整个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
			</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>

Answer 1

你已经修正了高度，这就是它显示固定高度的原因。从#entire-content-section and #top-content-section移除高度。

如何在div中包含内容

1 个答案: