html - 将 div 的高度设置为自动不会随内容调整

Question

我不确定我做错了什么，但无论我尝试什么，我都无法让我的 #service-brief-message 容器根据内容调整其高度。

我添加了 display: block 甚至给它填充来尝试帮助，但它没有解决它。

有人看到我做错了什么吗？

#red, #blue {
  width: 100%;
  height: 200px;
}
#red {
  background: red;
}
#blue {
  background: blue;
} 
#service-brief-message {
  background: #FFF;
  width: 100%;
  height: auto;
  padding: 20px 0;
  display: block;
  position: relative;
}
#service-brief-message-container {
  color: #2a2a2a;
  text-align: center;
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

<div id="red">
</div>
<div id="service-brief-message">
  <div id="service-brief-message-container">
    <h1 class="section-title">CUSTOM TAILORED WEBSITE DESIGN SOLUTIONS</h1>
    <h3 class="section-description" id="service-brief-description">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</h3>
  </div>
</div>
<div id="blue">
</div>

Answer 1

删除 #service-brief-message-container 上的绝对定位，使其成为以下内容即可达到目的:

#service-brief-message {
  background: green;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

#service-brief-message-container {
  color: #2a2a2a;
  text-align: center;
}

我相信这就是您要实现的目标(？):https://jsfiddle.net/2cdjrqg9/