内容未装满容器并溢出

Question

我有一个页面设置为显示垂直堆叠的内容块。

我让它在 768px 下工作得很好，但是在那个尺寸下，我添加了一些额外的行，它们都溢出了 div。 注意：我现在只在 768px 上进行测试。

这里是现场测试站点：http://s213258.gridserver.com/

任何帮助或想法都会很棒，谢谢！

HTML 结构：

    <section class="main-section" id="content">
  <div class="container">
    <div class="clearfix home-info-row">
      <div class="md-col md-col-5">
        <header class="section-heading">
          <h2>Timeline</h2>
        </header>
        <p class="section-sub-heading">
          The Big Moments in Les Anderson’s Life
        </p>
      </div>
      <div class="md-col md-col-7 impact-button__box">
        <a href="timeline.html" class="impact-button">
          <div>
            <span class="impact-button__title">See the life</span>
          </div>
        </a>
      </div>
    </div>
    <div class="clearfix home-info-row">
      <div class="md-col md-col-5 md-col-right">
        <header class="section-heading">
          <h2>Stories</h2>
        </header>
        <p class="section-sub-heading">
          Fond Memories from loved ones of Les
        </p>
      </div>
      <div class="md-col md-col-7 impact-button__box">
        <a href="stories.html" class="impact-button">
          <div>
            <span class="impact-button__title">Read the Stories</span>
          </div>
        </a>
      </div>
    </div>
    <div class="clearfix home-info-row">
      <div class="md-col md-col-5">
        <header class="section-heading">
          <h2>Gallery</h2>
        </header>
        <p class="section-sub-heading">
          Stunning photos from Les himself
        </p>
      </div>
      <div class="md-col md-col-7 impact-button__box">
        <a href="photos.html" class="impact-button">
          <div>
            <span class="impact-button__title">View the Photos</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

相对 CSS：

.section-heading {
  position: relative; }
  .section-heading h2 {
    font-size: 65px;
        letter-spacing: 2.5px;
        margin-bottom: 1rem;
        font-family: 'PontiacInlineRegular', serif;
     }
    @media (min-width: 30em) {
      .section-heading h2 {
        font-size: 115px;
                margin-top: 1rem; } }
    @media (min-width: 52em) {
      .section-heading h2 {
        font-size: 115px;
                margin-top: 1rem; } }
  .section-sub-heading {
    font-size: 20px;
        letter-spacing: 2px;
        line-height: 30px;
        width: 75%;
        min-width: 280px;
    margin: 0 auto 25px auto;
        font-family: 'PontiacInlineShadow', serif;
     }
    @media (min-width: 30em) {
      .section-sub-heading {
        font-size: 30px;
                width: 55%;
                line-height: 1.25; } }
    @media (min-width: 52em) {
      .section-sub-heading {
        font-size: 30px; } }


.impact-button {
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
  max-width: 498px;
  width: 100%;
  text-align: center;
  display: block;
  color: #DAC9A8;
  padding: 25px 25px 30px;
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
    margin: 0;
    padding: 15px 0;
  text-decoration: none; }
  .impact-button.full {
    max-width: 100%; }
  @media (min-width: 30em) {
    .impact-button {
      margin-left: 0;
      margin-right: 0;
            width: 100%;
            max-width: none;
          float: none; } }
  @media (min-width: 52em) {
    .impact-button {
      margin-left: 0;
      margin-right: 0; } }
  .impact-button:hover {
    color: #AC987F; }

    .impact-button__box {
        background-color: #963C34;
        width: 100%;
    }

    .impact-button__title {
    font-size: 30px;
    font-weight: 300;
        font-family: 'PontiacInlineShadow', serif;
    line-height: 1.1;
    margin: 0;
    padding-bottom: 0;
        padding-top: 5px;
    display: block;
    position: relative; }
    @media (max-width: 52em) {
       .impact-button__text {
         font-size: 40px; } }
    @media (min-width: 52em) {
      .impact-button__title {
        font-size: 48px; } }
  .impact-button__text {
    display: block;
    font-size: 23px;
    margin-top: 30px; }
     @media (max-width: 52em) {
        .impact-button__text {
          font-size: 18px; }
      }
    .impact-button__text em, .impact-button__text a {
      text-decoration: underline;
      font-style: normal; }
    .impact-button__text a {
      display: inline-block;
      position: relative;
      z-index: 5; }
  .impact-button--download {
    box-shadow: inset 0 0 0 4px #575E70;
    padding: 15px 10px;
    text-decoration: none;
    display: inline-block;
    min-width: 300px; }
    .impact-button--download:before, .impact-button--download:after {
      border: 4px solid transparent; }
    .impact-button--download .impact-button__title {
      font-size: 25px;
      margin: 0;
      line-height: 1.1;
      padding-bottom: 10px; }
      .impact-button--download .impact-button__title em, .impact-button--download .impact-button__title a {
        position: relative;
        font-style: normal; }
        .impact-button--download .impact-button__title em:after, .impact-button--download .impact-button__title a:after {
          content: "";
          display: block;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          height: 2px;
          background: #AC987F; }
      .impact-button--download .impact-button__title:after {
        display: none; }
    .impact-button--download .impact-button__text {
      font-size: 12px;
      margin: 0; }

Answer 1

好的，我明白了。

没有不准确的高度，它是一系列带有偏移边距的框，使事物超出了框的范围。

一切都解决了，只是花了一些时间。