自动高度未覆盖整个容器

Question

我遇到问题是获取容器的高度以完全覆盖容器内的文本。我不确定我做错了什么。我已将高度设置为auto，尝试解决此问题，但高度仍未覆盖所有内容。

有人看到我做错了吗？如果有人需要看到这个，我可以在评论中提供网站地址。

＆＃13;

＆＃13;

.light-gray {
  background-color: #E0E0E0;
  width: 34%;
}
.light-gray-container {
  /*margin: 100px 15% 0 15%;*/
  top: 150px;
  left: 15%;
  position: relative;
  width: 80%;
  height: auto;
}
#things-to-know-title {
  font-size: 1.4em;
  color: #000;
}
.things-to-know-bullets {
  font-size: 1.1em;
  color: #606060;
  margin: 40px 15% 40px 0;
  line-height: 1.6em;
}

＆＃13;

<div class="light-gray">
  <div class="light-gray-container">
    <div id="things-to-know-title">THINGS TO KNOW</div>
    <div class="things-to-know-bullets">Although we are located in Ohio, we review and accept business projects from all over the world.</div>
    <div class="things-to-know-bullets">Take a few extra minutes to provide us with your specific project details as this will allow us to better evaluate the scope.</div>
    <div class="things-to-know-bullets">If you have a general inquiry you may email us directly.</div>
    <div class="things-to-know-bullets">We do a thorough evaluation of all projects and enjoy working with established brands that are open to a balance of strategic & creative solutions.</div>
    <div class="things-to-know-bullets">If you have an exceptional command of the English language and would like to write for our digital agency please email us.</div>
    <div class="things-to-know-bullets">If you have strong strategic, design or user experience skills and would like to Intern or work for Isadora Design please email us.</div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新图片：

Answer 1

您可以像这样更改您的CSS

删除top: 150px;中的.light-gray-container并在padding-top: 150px;

中添加.light-gray

＆＃13;

＆＃13;

.light-gray {
  background-color: #E0E0E0;
  width: 34%;
  padding-top: 150px;
}
.light-gray-container {
  /*margin: 100px 15% 0 15%;*/
  left: 15%;
  position: relative;
  width: 80%;
  height: auto;
}
#things-to-know-title {
  font-size: 1.4em;
  color: #000;
}
.things-to-know-bullets {
  font-size: 1.1em;
  color: #606060;
  margin: 40px 15% 0px 0;
  line-height: 1.6em;
}

＆＃13;

<div class="light-gray">
  <div class="light-gray-container">
    <div id="things-to-know-title">THINGS TO KNOW</div>
    <div class="things-to-know-bullets">Although we are located in Ohio, we review and accept business projects from all over the world.</div>
    <div class="things-to-know-bullets">Take a few extra minutes to provide us with your specific project details as this will allow us to better evaluate the scope.</div>
    <div class="things-to-know-bullets">If you have a general inquiry you may email us directly.</div>
    <div class="things-to-know-bullets">We do a thorough evaluation of all projects and enjoy working with established brands that are open to a balance of strategic & creative solutions.</div>
    <div class="things-to-know-bullets">If you have an exceptional command of the English language and would like to write for our digital agency please email us.</div>
    <div class="things-to-know-bullets">If you have strong strategic, design or user experience skills and would like to Intern or work for Isadora Design please email us.</div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将overflow:auto添加到具有浅灰色等级的div将解决您的问题。