Question

我正在使用bootstrap构建单页网站。我遇到的问题是，我有一个父节，其中高度设置为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树中都有特定的用途和位置。在<section>标记下放置了几个 .container 。有关BS .container的两件事：

每页只应有一个.container或.container-fluid。
.container或.container-fluid目的是环绕页面中的所有内容。

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

演示

＆＃13;

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

＆＃13;

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

＆＃13;

父DIV匹配子高度

1 个答案:

演示