如何使容器内的元素响应？

Question

我有一个容器，其中有背景图片，我希望图片占视口的 100%。这有效 great 但是当我调整浏览器的大小时，容器的元素将流出，正如您在向下滚动时看到的那样：

我试过给父元素添加背景图片来解决这个问题，但也没用。这可能吗？

HTML:

<section id="header">
            <div class="container-fluid landing-page">
                <div class="row logo">
                    <div class="col-12">
                        <img src="img/logoblack.png">
                    </div>               
                </div>

                <div class="row intro">
                    <div class="col-12">
                        <h6>Hello I'm</h6>
                        <h2>Temple Naylor</h2>
                        <h4>Website / App Developer</h4>
                    </div>            
                </div>

                <div class="row lets-talk">
                    <div class="col-12">
                        <button type="button" class="btn btn-primary">Let's Talk</button>
                    </div>         
                </div>



            </div>
        </section>

CSS:

/* -------------------------------------
HEADER
--------------------------------------*/

#header {
  /* Location of the image */
  background-image: url(/img/header-min.jpg);

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;

    height: 100vh;
}

.landing-page {
    text-align: center;
    color: black;
    text-transform: uppercase;
    font-weight: 200;
    background-size: 100%;
}

.logo {
    padding-top: 5%;
}

.intro h6{
    padding-top: 5%;
    font-size: 250%;
}

.intro h2{
    padding-top: 1%;
    font-size: 400%;
}

.intro h4{
    padding-top: 1%;
    font-size: 200%;
}

.lets-talk {
    padding-top: 5%;
    padding-bottom: 5%;
}


.second {
    text-align: center;
}

Answer 1

疯狂的小修复，但将 height: 100vh; 更改为 min-height: 100vh; 似乎可以解决问题:)

/* -------------------------------------
HEADER
--------------------------------------*/

#header {
  /* Location of the image */
  background-image: url(/img/header-min.jpg);
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
  min-height: 100vh;
}
.landing-page {
  text-align: center;
  color: black;
  text-transform: uppercase;
  font-weight: 200;
  background-size: 100%;
}
.logo {
  padding-top: 5%;
}
.intro h6 {
  padding-top: 5%;
  font-size: 250%;
}
.intro h2 {
  padding-top: 1%;
  font-size: 400%;
}
.intro h4 {
  padding-top: 1%;
  font-size: 200%;
}
.lets-talk {
  padding-top: 5%;
  padding-bottom: 5%;
}
.second {
  text-align: center;
}

<section id="header">
  <div class="container-fluid landing-page">
    <div class="row logo">
      <div class="col-12">
        <img src="img/logoblack.png">
      </div>
    </div>

    <div class="row intro">
      <div class="col-12">
        <h6>Hello I'm</h6>
        <h2>Temple Naylor</h2>
        <h4>Website / App Developer</h4>
      </div>
    </div>

    <div class="row lets-talk">
      <div class="col-12">
        <button type="button" class="btn btn-primary">Let's Talk</button>
      </div>
    </div>
  </div>
</section>

如何使容器内的元素响应？

How to make elements inside container responsive?

html

css

overflow

twitter-bootstrap