父 DIV 匹配子身高

Question

我正在使用引导程序构建一个单页网站。我遇到的问题是，我有一个父部分，其中高度设置为 100% 并且不包含在内。

但是包含该部分的其余内容。因此容器中的所有内容都溢出到下一部分。我希望不包含的父部分与孩子的高度相匹配。我尝试过使用overflow:auto，但是，我不希望在内容被剪辑时出现滚动条。

这是我的代码。

#map {
  border-top:2px solid #6d7873;
  background: #d7dbd9;
  padding-top:85px;
  height:100%;
  min-height: auto;
}

#regions_div {
  min-height: 100%;
  width:100%;
  border:1px solid #a1aaa6;
}

#dash {
  border-top:2px solid #6d7873;
  background: #bcc2bf;
  padding-top:85px;
  height:100%;
  min-height: auto;
}

<!-- Map Section -->
  <section id="map">
   <div class="container">
    <div class="row">
      <div class="col-sm-12">
          <div id="regions_div"></div>
      </div>
      <div class="row">
        <div class="col-xs-6 well">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

        </div>
        <div class="col-xs-6 well">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
        </div>

      </div>
    </div>
  </div>
 </section>

<!--Dashboard Section-->
   <section id="dash">
   <div class="container">
    <div class="row">
      <div class="col-lg-12">
          <h2>Disaster Maps</h2>
          <hr />
        <a class="btn btn-default btn-md" href="#"><i class="fa fa-map-o" aria-hidden="true"></i> Disaster Map</a> &nbsp; <a class="btn btn-default" href="#"><i class="fa fa-tachometer" aria-hidden="true"></i> Disaster Dashboard</a>
      </div>
    </div>
  </div>
 </section>

Answer 1

所有 Bootstrap 类在 DOM 树中都有特定的用途和位置。有几个 .containers 被放置在 <section> 标记下。 BS.container有两点：

1. 每页应该只有一个.container 或.container-fluid。

2. .container 或 .container-fluid 的目的是环绕页面中的所有内容。

这可以解释为什么内容会流失，因为.container 只能对自己的后代施加影响。

演示

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0
}

#map {
  border-top: 2px solid #6d7873;
  background: #d7dbd9;
  padding-top: 85px;
  min-height: 100%;
  height: auto;
}

#regions_div {
  min-height: 100%;
  width: 100%;
  border: 1px solid #a1aaa6;
}

#dash {
  border-top: 2px solid #6d7873;
  background: #bcc2bf;
  padding: 85px;
  min-height: 100%;
  height: auto;
}

footer {
  height: 50px;
}

article.content:first-of-type {
  padding: 10px 10px 0;
}

.row+.row .content {
  margin: -10px auto 0;
}

hr {
  margin: 20px auto;
}

<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'>



<main class="container">
  <!-- Map Section -->
  <section id="map">

    <div class="row">
      <div class="col-md-12">
        <article id="regions_div"></article>
      </div>
    </div>

    <div class="row">
      <article class='content'>
        <div class="col-md-12 well">

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

        </div>
      </article>
    </div>

    <div class='row'>
      <article class='content'>
        <div class="col-md-12 well">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
        </div>
      </article>
    </div>

  </section>

  <!--Dashboard Section-->
  <section id='dash'>

    <div class="row">
      <article class='content'>
        <div class="col-md-12">
          <h2>Disaster Maps</h2>
          <hr />
          <a class="btn btn-link btn-md" href="#"><i class="fa fa-map-o" aria-hidden="true"></i> Disaster Map</a> &nbsp; <a class="btn btn-link" href="#"><i class="fa fa-tachometer" aria-hidden="true"></i> Disaster Dashboard</a>
        </div>
      </article>
    </div>

  </section>
</main>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.js'></script>