具有最小高度的引导程序部分不会伸展

Question

我有一个具有100vh最小高度部分的Bootstrap布局。这在大多数情况下都是有效的。如果我有很多文字，则该部分将按照所需的文字大小进行拉伸。

但是，如果我在该部分中有一些Bootstrap按钮，并且窗口太窄，则该部分无法拉伸以适合。按钮溢出。我不确定该如何解决。

#hero {
  width: 100%;
  min-height: 100vh;
  background-color: black;
  background: url(../img/xbg1.jpg) top center;
  background-size: cover;
  position: relative;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .hero-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#hero h1 {
  margin: 30px 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  color: #000;
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 768px) {
  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

.sectionbutton {
height: 150px;
width: 150px;
margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="hero">
    <div class="hero-container" style="background: #8A8175; background-image: url(img/certificatebg.jpg); background-size: 100%; padding-top: 75px;">
 <div class="row" style="width: 70%; margin-top: 20px; margin-bottom: 20px;">
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 1</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 2</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 3</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 4</button></div>

  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 5</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 6</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 7</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 8</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 9</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 10</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 11</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 12</button></div>

</div>

<!-- #hero --></div>

</section>

Answer 1

我并不奇怪，如果您使用的是引导程序，那么就绝对要放置.hero容器了，真的没有必要。

按照我的理解，删除此项可以使背景填充空间。我还怀疑最小高度：100vh也是造成此问题的原因，视口高度仅仅是那个，它将填满视口高度。

#hero {
  width: 100%;
  height: 100%;
  background-color: black;
  background: url(../img/xbg1.jpg) top center;
  background-size: cover;
  position: relative;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .hero-container {
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#hero h1 {
  margin: 30px 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  color: #000;
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 768px) {
  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

.sectionbutton {
height: 150px;
width: 150px;
margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="hero">
    <div class="hero-container" style="background: #8A8175; background-image: url(img/certificatebg.jpg); background-size: 100%; padding-top: 75px;">
 <div class="row" style="width: 70%; margin-top: 20px; margin-bottom: 20px;">
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 1</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 2</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 3</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 4</button></div>

  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 5</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 6</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 7</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 8</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 9</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 10</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 11</button></div>
  <div class="col-lg-3 col-md-4 col-sm-6"><button type="button" class="btn sectionbutton">Section 12</button></div>

</div>

<!-- #hero --></div>

</section>