html - 如何将内容放入div

标签 html css

我无法在整个 block 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
			</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>

最佳答案

您已经固定了高度,这就是它显示固定高度的原因。从 #entire-content-section 和 #top-content-section 中删除高度。

关于html - 如何将内容放入div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35823442/

相关文章:

javascript - 功能适用于页面加载但不适用于点击

javascript - 您如何检测 HTML5 音频何时完成播放(不止一次)?

javascript - 菜单悬停的 IE 问题

html - 如何摆脱一些大写字母的水平偏移/填充

html 元素使整个网络应用程序可选择?

javascript - 如何获取图片链接以在 iframe 中打开其他文件

javascript - jQuery 无法注册 2 个关键事件监听器

CSS 图像未在 Internet Explorer 上显示

css - Chrome 开发工具 : If I map my local resources to network resources my source map links in the style inspector disappears

jquery - 输入事件在 Jquery Mobile 和 PhoneGap 中不起作用