视差滚动的第一张幻灯片始终全屏

Question

产品尚未完成。 ：d

我为自己制作了一个视差网站。目前我有3个滑块（家庭，关于和联系）。我想让第一张幻灯片（主页部分）始终全屏，无论你有什么分辨率或任何缩放比例。

我现在唯一能做到这一点的方法是给第一个滑块（主页）提供一个像素高度。 Ofcouse这不会是他的屏幕上的其他人的全屏（其他分辨率）。我真的不介意其他滑块高度，我只想让第一个滑块（主页）在任何分辨率上始终全屏。

现在我在CSS中的主页滑块的高度为100％，所以我的主页滑块不是那么大（高度），因为我的内容目前并不多。

请参阅下面的代码，了解我目前的情况。 HTML和CSS代码。不介意元素标签，仍然需要一些清洁。 ：d

任何人都有解决方案吗？谢谢！

＆＃13;

＆＃13;

* {
  margin: 0 auto;
  padding: 0;
}
body,
html {
  height: 100%;
  background: #000000;
}
body {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
  height: 100%;
}
/* ==========================================================================
Parallax Scroll
========================================================================== */

/* Slide 1 */

#home {
  background: #000000 no-repeat center center fixed;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: table;
}
/* Slide 2 */

#about {
  background: #ffffff no-repeat center center fixed;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: table;
}
#contact {
  background: #ffffff no-repeat center center fixed;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: table;
}
/* ==========================================================================
Sections CSS
========================================================================== */

/*.loading 
{
background: url('../img/ico_loading.gif') no-repeat center center;
}

section 
{
opacity: 1;
}

.loaded section 
{
opacity: 1;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
-o-transition: opacity 300ms ease-out;;
transition: opacity 300ms ease-out;
}*/

#brand i {
  color: #8f1c35;
  font-style: normal;
  text-transform: uppercase;
  font-weight: bold;
}
#brand {
  text-transform: uppercase;
  font-size: 25px;
  color: white;
  display: inline-block;
}
.center-table {
  display: table;
  margin-top: 50px;
}
.center-tablecell {
  display: table-cell;
  vertical-align: middle;
}
.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none;
  margin-top: 6px;
}
#text1 {
  margin-top: 50px;
}
#text1 h1 {
  font-size: 50px;
  color: #a21838;
  display: inline;
  text-transform: uppercase;
}
#text2 h1 {
  font-size: 50px;
  color: #a21838;
  display: inline;
  text-transform: uppercase;
}
#text3 h1 {
  font-size: 50px;
  color: #a21838;
  display: inline;
  text-transform: uppercase;
}
#contactme .info {
  color: #000000;
  font-size: 21px;
}
#contactme .email {
  color: #a21838;
  font-size: 25px;
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
}
#contactme .social-media {
  color: #a21838;
  font-size: 25px;
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
  ;
}
#aboutme .study {
  color: #000000;
  font-size: 21px;
}
#aboutme .me {
  color: black;
}
#aboutme .projects {
  color: #a21838;
  font-size: 25px;
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
}
#name #student {
  text-align: center;
}
#name h1 {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 64px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 3px;
  margin-bottom: 10px;
  margin-top: -10px;
}
#student h2 {
  margin-top: 75px;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
}
#container-edu {
  margin-top: 100px;
  margin-bottom: 100px;
}
#container-edu .edu {
  color: #a21838;
  font-size: 25px;
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
}
hr {
  color: #000000;
  background-color: #000000;
  height: 1px;
  width: 75%;
}
/* ==========================================================================
Animations Navbar CSS
========================================================================== */

/* ==========================================================================
Bootstrap Navbar CSS
========================================================================== */

.navbar-default {
  background-color: #000000;
  font-size: 14px;
  border-bottom: 4px solid #8f1c35;
}
.navbar-default .navbar-brand {
  color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
  font-weight: bold;
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #8f1c35;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #8f1c35;
}
.navbar-default .navbar-toggle {
  border-color: #8f1c35;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #8f1c35;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ffffff;
  text-align: left;
}
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #8f1c35;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #8f1c35;
  }
}
/* ==========================================================================
Non Mobile First
========================================================================== */

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {}
/* Small Devices, Tablets || IS VAN 250% EN HOGER ZOOM! */

@media only screen and (max-width: 768px) {
  #name h1 {
    font-size:42px;
  }
  #student h2 {
    font-size: 13px;
  }
  #text1 h1 {
    font-size: 27px;
  }
  #aboutme .study {
    font-size: 13px;
  }
  #text2 h1 {
    font-size: 27px;
  }
  #contactme .info {
    font-size: 13px;
  }
  #text3 h1 {
    font-size: 27px;
  }
}
/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
  #name h1 {
    font-size: 34px;
  }
}
/* Custom, iPhone Retina */

@media only screen and (max-width: 479px) {}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".navbar-sectionScroll" data-offset="230">
  <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top navbar-sectionScroll" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
          <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" id="brand" href="#home">FirstName <i>LastName</i></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#home">HOME</a>
          </li>
          <li><a href="#about">ABOUT</a>
          </li>
          <li><a href="#contact">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <section id="home">
    <div class="container center-table">
      <div class="row text-center center-tablecell">
        <div id="student">
          <h2>Student Software Developer</h2>
        </div>
        <div id="name">
          <h1>Name</h1>
        </div>
      </div>
    </div>
  </section>


  <section id="about">
    <div class="container center-table">
      <div class="row text-center center-tablecell">
        <div id="aboutme">
          <div id="text1">
            <h1>ABOUT</h1>&nbsp;
            <h1 class="me">ME</h1>
            <hr>
          </div>
          <p class="study">My name is LoremIpsum.
            <br/>I am currently studying as a Software Developer at the Hogeschool Stenden in Emmen.</p>
          <br>
          <br>
          <br>
          <p class="projects">Projects</p>
        </div>

        <div id="container-projects">
          <div class="row row-centered">
            <div class="col-xs-6 col-sm-4 col-centered" style="background: black; height: 200px; width: 300px;"></div>
            <div class="col-xs-6 col-sm-4 col-centered" style="background: black; height: 200px; width: 300px;"></div>
            <div class="col-xs-6 col-sm-4 col-centered" style="background: black; height: 200px; width: 300px;"></div>
          </div>
        </div>

        <div id="container-edu">
          <p class="edu">Education</p>
        </div>
      </div>
    </div>
  </section>


  <section id="contact">
    <div class="container center-table">
      <div class="row text-center center-tablecell">
        <div id="contactme">
          <div id="text2">
            <h1>CONTACT</h1>
            <hr>
          </div>
          <p class="info">If you would like to make any contact, please see below for more information.</p>
          <br/>
          <br/>
          <br/>
          <p class="email">Send an Email</p>
          <br>
          <br>
          <br>

          <div id="social">
            <p class="social-media">Social Media</p>
          </div>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
      </div>
    </div>
  </section>

＆＃13;

＆＃13;

＆＃13;