html - 部分神秘地将内容推送到页面下方

Question

我正在使用 bootstrap 开发我的网站。我有一个导航栏、图像 slider 、产品部分和一个关于 + 页 footer 分。出于某种原因，我的产品部分将关于部分推到页面下方，我似乎无法弄清楚为什么？另外:当我缩小屏幕时，这些部分之间的距离是正确的，问题似乎只在全屏时出现。

HTML:

      <!-- Products section -->
  <section id="products">
    <div class="col-sm-3 text-center">
      <br>
      <img src="images/closed-door-with-border-silhouette.png" alt="Doors" />
      <br>
      <h3>Doors</h3>
      <p>Your choice of facing-veneered, laminated or primed for internal painting, certified fire rating and prepared for your lock fitting.</p>
      <!-- Content more details button-->
      <li><a href="#doors" data-toggle="modal">Learn more</a>
      </li>
    </div>
    <div class="col-sm-3 text-center">
      <br>
      <img src="images/closed-doors-with-windows.png" alt="Door sets" />
      <br>
      <h3>Doorsets</h3>
      <p>Ensure the co-ordination and quality of your interior design specification. Simply select your components and leave the rest to us.</p>
      <li><a href="#doors" data-toggle="modal">Learn more</a>
      </li>
    </div>
    <div class="col-sm-3 text-center">
      <br>
      <img src="images/locked-padlock.png" alt="Security doors" />
      <br>
      <h3>Security Doors</h3>
      <p>Guaranteed protection with a line of defence that is the recognised industry leader in timber based security door systems.</p>
      <!-- Content more details button-->
      <li><a href="#doors" data-toggle="modal">Learn more</a>
      </li>
    </div>
    <div class="col-sm-3 text-center">
      <br>
      <img src="images/portable-toilet-doors.png" alt="Washroom cubicles" />
      <br>
      <h3>Washroom Cubicles</h3>
      <p>Choose from an extensive range of colours and sizes available to suit many applications in the construction and leisure industries.</p>
      <li><a href="#doors" data-toggle="modal">Learn more</a>
      </li>
    </div>
  </section>

  <!-- About section -->
  <section id="about">

  </section>

  <!-- Footer -->
  <footer id="footer" class="navbar-inverse">
    <div class="container">
      <p class="navbar-text"><a href="#">Terms and Conditions</a> | <a data-toggle="modal"href="#creditations">Creditations</a></p>
    </div>
  </footer>

CSS:

li {
  list-style-type: none; }

section {
  min-height: 500px; }

h1 {
  font-size: 25px; }

u {
  border-bottom: 1px dotted #000;
  text-decoration: none; }

footer p {
  position: absolute; }

#logo {
  height: 60px;
  width: 140px;
  position: relative;
  bottom: 20px;
  right: 10px;
  padding-left: 20px; }

.nav {
  padding-left: 6px; }

.navbar-right {
  padding-right: 30px; }

.navbar-header {
  padding-right: 20px; }

#footer {
  min-height: 0px;
  line-height: 25px;
  height: 50px;
  padding-top: 0;
  padding-right: 100px; }

#footer > .container > p > a {
  color: white; }

.glyphicon-home {
  padding-right: 5px; }

.carousel-control .icon-prev,
.carousel-control .icon-next {
  font-size: 50px; }

#myCarousel {
  padding-top: 50px; }

.text-justify {
  text-align: justify; }

.text-center {
  text-align: center; }

@media only screen and (max-width: 400px) {
  .text-center {
    padding-right: 40px;
    /*require padding */
    padding-left: 40px;
    /*require padding */ } }
#about {
  border: 1px solid black;
  background-color: red; }

#learnMoreButton:hover {
  transition: background-color 200ms ease-out 50ms; }

li > a {
  transition: background-color 200ms ease-out 50ms; }

/*# sourceMappingURL=stylesheet.css.map */

Answer 1

这是因为您在 section 元素上设置了 min-height: 500px。因此，您的部分将始终具有最小 500 像素的高度(在桌面屏幕上，您会看到此部分和关于我们部分之间的差距，因为您的产品高度约为 150 像素，在小屏幕上，此部分的高度约为 500 像素，因此您看不到此差距)。