部分内容与其他部分重叠

Question

如何阻止服务部分的内容与联系人部分重叠？ This is my complete code. Here is a picture of the problem.谢谢

html:

<section id="services" class="services-section">
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h1>Services Section</h1>
      <div class="the rest">
       ...
      </div>
    </div>
  </div>
</div>

css:

`.services-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: white;
  font-family: 'Roboto Mono', monospace;
}`

Answer 1

您将每个部分的高度限制为 100%，并且 "services" 部分中的内容过多，因此溢出 "contact" 部分。

将 height: 100% 更改为 min-height: 100vh，以便每个部分至少占据整个视口高度，但如果内容过多，则会超出它。

/*!
 * Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
  width: 100%;
  height: 100%;
}

html {
  width: 100%;
  height: 100%;
}

@media(min-width:767px) {
  .navbar {
    text-transform: lowercase;
    font-family: 'Roboto Mono', monospace;
    background-color: white;
    color: blue;
    border: none;
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
  }
  .top-nav-collapse {
    padding: 0;
  }
}


/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */

.navbar-default .navbar-toggle {
  border: none;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: blue;
}

.navbar-default {
  background-color: #fff;
  border: none;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: transparent;
}

.navbar-default .navbar-brand {
  color: blue;
  font-family: 'Roboto Mono', monospace;
}

.navbar-default .navbar-nav>li>a:hover {
  color: blue;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  color: #fff;
  background-color: blue;
}

@media screen and (min-width: 768px) bootstrap.min.css:5 .jumbotron .h1,
.jumbotron h1 {
  font-size: 100px;
}

.intro-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background-color: #f1c40f;
  font-family: 'Roboto Mono', monospace;
}

.main-title {
  font-size: 100px;
}

.unbehaved-element {
  font-size: 2em;
}

@media(max-width: 1580px) {
  .main-title {
    font-size: 18px;
  }
  .unbehaved-element {
    font-size: 1.9em;
    /* Fine tune unbehaved elements */
  }
}

@media(max-width: 980px) {
  .main-title {
    font-size: 16px;
  }
}

img.img-circle {
  padding-top: 100px;
}

div.about-me {
  padding-top: 100px;
}

.about-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
  font-family: 'Roboto Mono', monospace;
}

.services-section {
  min-height: 100vh;
  padding-top: 150px;
  text-align: center;
  background: white;
  font-family: 'Roboto Mono', monospace;
}

.services-container li {
  display: inline;
  font-size: 100px;
}

.contact-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
  font-family: 'Roboto Mono', monospace;
}

div.middle-content {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

section {
  padding: 75px 0;
  background: #fff;
}

.divider {
  width: 100%;
  margin: 20px auto 15px;
  position: relative;
  height: 1px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}

.divider::after {
  height: 1px;
  background: #e8e8e8;
  background: -moz-linear-gradient(left, transparent 0, rgba(0, 0, 0, 0.09) 35%, rgba(0, 0, 0, 0.09) 70%, transparent 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(35%, rgba(0, 0, 0, 0.09)), color-stop(70%, rgba(0, 0, 0, 0.09)), color-stop(100%, transparent));
  background: -webkit-linear-gradient(left, transparent 0, rgba(0, 0, 0, 0.09) 35%, rgba(0, 0, 0, 0.09) 70%, transparent 100%);
  background: -o-linear-gradient(left, transparent 0, rgba(0, 0, 0, 0.09) 35%, rgba(0, 0, 0, 0.09) 70%, transparent 100%);
  background: -ms-linear-gradient(left, transparent 0, rgba(0, 0, 0, 0.09) 35%, rgba(0, 0, 0, 0.09) 70%, transparent 100%);
  background: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.09) 35%, rgba(0, 0, 0, 0.09) 70%, transparent 100%);
  position: absolute;
  bottom: -1px;
  content: "";
  width: 100%;
  left: 0;
}

p {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 30px;
}

.shadow,
.shadow-narrow {
  position: relative;
  background-color: #fff;
}

.service-block {
  margin-bottom: 30px;
  border-radius: 3px;
  border: 1px solid #f1f1f1;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.shadow-narrow::before,
.shadow::before {
  position: absolute;
  left: 0;
  height: 60%;
  bottom: 0;
  width: 100%;
  content: "";
  background-color: #fff;
  z-index: 2;
}

.shadow-narrow::after,
.shadow::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 96%;
  left: 50%;
  bottom: 2px;
  margin-left: -48%;
  -webkit-box-shadow: 0 5px 7px #999;
  box-shadow: 0 5px 7px #999;
  z-index: 1;
  border-radius: 10%;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.shadow-narrow:hover::after,
.shadow:hover::after {
  bottom: 10px;
}

.icon.bg-df {
  background-color: #09afdf;
  color: #ffffff;
}

.service-block .icon {
  margin-bottom: 10px;
}

.icon {
  display: inline-block;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.85);
  color: #000;
  font-size: 24px;
  width: 60px;
  height: 60px;
  line-height: 58px;
  transition: all .2s ease-in-out;
  border-radius: 0;
  transform: rotate(45deg);
  border: 1px solid transparent;
}

.shadow *,
.shadow-narrow * {
  position: relative;
  z-index: 3;
}

.service-block p {
  clear: both;
  margin-bottom: 15px;
}

.icon i {
  position: relative;
  z-index: 1;
  transform: rotate(-45deg);
}

<!DOCTYPE html>
<html lang="en">

  <head>

    <title>Noly The Designer</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/scrolling-nav.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  </head>


  <!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header page-scroll">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand page-scroll" href="#page-top">noly&mdash;thedesigner</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
          <ul class="nav navbar-nav">
            <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
            <li class="hidden">
              <a class="page-scroll" href="#page-top"></a>
            </li>
            <li>
              <a class="page-scroll" href="#about">About</a>
            </li>
            <li>
              <a class="page-scroll" href="#services">Services</a>
            </li>
            <li>
              <a class="page-scroll" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container -->
    </nav>

    <!-- Intro Section -->
    <section id="intro" class="intro-section">
      <div class="container">
        <div class="row">
          <div class="middle-content col-lg-12">
            <div class="jumbotron">
              <h1>nlythdsgnr</h1>
              <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>

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

    <!-- About Section -->
    <section id="about" class="about-section">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1>About Section</h1>
            <img src="king.png" class="img-circle" alt="Bird">
            <div class="about-me">
              Graphic Designer based in Wolverhampton.
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services-section">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1>Services Section</h1>
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center">
                  <h2 class="text-uppercase">Our Services</h2>
                  <div class="divider"></div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas facere vero ex tempora saepe perspiciatis ducimus sequi animi.</p>
                </div>
                <div class="col-md-4 ">
                  <div class="pv-30 ph-20 service-block bordered shadow text-center object-non-visible animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="100">
                    <span class="icon bg-df circle"><i class="fa fa-diamond"></i></span>
                    <h3>Clean Code & Design</h3>
                    <div class="divider clearfix"></div>
                    <p>Voluptatem ad provident non repudiandae beatae cupiditate amet reiciendis lorem ipsum dolor sit amet, consectetur.</p>
                    <a href="page-services.html">Read More <i class="pl-5 fa fa-angle-double-right"></i></a>
                  </div>
                </div>
                <div class="col-md-4 ">
                  <div class="pv-30 ph-20 service-block bordered shadow text-center object-non-visible animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="150">
                    <span class="icon bg-df circle"><i class="fa fa-connectdevelop"></i></span>
                    <h3>Extremely Flexible</h3>
                    <div class="divider clearfix"></div>
                    <p>Iure sequi unde hic. Sapiente quaerat sequi inventore veritatis cumque lorem ipsum dolor sit amet, consectetur.</p>
                    <a href="page-services.html">Read More <i class="pl-5 fa fa-angle-double-right"></i></a>
                  </div>
                </div>
                <div class="col-md-4 ">
                  <div class="pv-30 ph-20 service-block bordered shadow text-center object-non-visible animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="200">
                    <span class="icon bg-df circle"><i class="fa fa-laptop"></i></span>
                    <h3>Latest Technologies</h3>
                    <div class="divider clearfix"></div>
                    <p>Iure sequi unde hic. Sapiente quaerat sequi inventore veritatis cumque lorem ipsum dolor sit amet, consectetur.</p>
                    <a href="page-services.html">Read More <i class="pl-5 fa fa-angle-double-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1>Contact Section</h1>
          </div>
        </div>
      </div>
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>

  </body>

</html>

部分内容与其他部分重叠

Section Content Overlapping other Sections

html

css

sections

twitter-bootstrap