将div的高度设置为auto不会随内容进行调整

Question

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

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

任何人都能看到我做错了什么？

＆＃13;

＆＃13;

#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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在#service-brief-message中，摆脱：

padding: 20px 0;

如果要添加填充，请将以下内容添加到CSS：

.section-description{
    padding-top: 20px;
}

Answer 2

删除#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/

Answer 3

而不是使用position: abosolute使用relative 绝对定位将使元素脱离正常流量，并且不会影响父元素的大小。

＆＃13;

＆＃13;

#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: relative;/*absolute;*/
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;