Question

我想知道如何确保第1部分和第2部分的背景颜色填充整个网页，如example.正如您在我的网站上看到的那样，背景颜色覆盖了一半网页我想要第一部分和第二部分的背景颜色来填充该部分的整个背景。

我尝试过使用CSS。但是，这不起作用。

.one {
  background-color:#c00;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
}

网站代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.body {
  font-family: 'Roboto', sans-serif;
  color: black;
}
.navbar.navbar-default {
  background-color: #FFFFFF;
  height: 10vh;
  z-index: 100;
}

.navbar.navbar-default ul {
  list-style-type: none;
  text-align: center;
}

.navbar.navbar-default ul li {
  display: inline-block;
}

.dropdown-menu li {
  text-align: center;
}

.dropdown .dropdown-menu {
  background-color: #FFFFFF;
}

.dropdown .dropdown-menu a {
  color: white;
}

.navbar.navbar-default ul li a {
  display: inline-block;
  padding: 3.5vh 8px 4px;
  color: black;
  text-decoration: none;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul li:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 3px;
  background-color: black;
  border-radius: 9px;
  transition: all .2s;
}

.nav.navbar-nav,
.nav.navbar-nav>li {
  float: none;
}

.navbar.navbar-default ul li:hover:after {
  right: 0;
  left: 0;
}

.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
  position: relative;
  display: block;
} 

.one {
  background-color:#c00;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
}

.two {
  background: #563D7C;
}
</style>
<body>
  <div class="container">
    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
           </button>
         </div>
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="nav navbar-nav">
             <li><a href="#">Home</a>
             </li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="#">Action</a>
                 </li>
                 <li><a href="#section3">Contact</a>
                 </li>
                 <li><a href="#">Something else here</a>
                 </li>
                 <li><a href="#">Separated link</a>
                 </li>
                 <li><a href="#">One more separated link</a>
                 </li>
               </ul>
             </li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="#">Action</a>
                 </li>
                 <li><a href="#">Another action</a>
                 </li>
                 <li><a href="#">Something else here</a>
                 </li>
                 <li><a href="#">Separated link</a>
                 </li>

                 <li><a href="#">One more separated link</a>
                 </li>
               </ul>
             </li>
             <li><a href="#">Clients</a>
             </li>
             <li><a href="#contact-me">Contact Me</a>
             </li>
           </ul>
         </div>
         <!-- /.navbar-collapse -->
       </div>
       <!-- /.container-fluid -->
     </nav>
     <div id="sections">
            <div class="section one">
              <div class="jumbotron text-center">
                <h1>My First Bootstrap Page</h1>
                <p>Resize this responsive page to see the effect!</p>
              </div>



            <a href="#section two"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>



            </div>
            <div class="section two"></div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>

        <script>
            $(document).ready(function() {
                $('#sections').fullpage();
            });
        </script>


</body>
</html>

Answer 1

看起来您正在加载jQuery两次。一旦进入标题（在Bootstrap链接中），一次进入页脚，fullpage.js。由于您已经加载了一次，因此您第二次不需要它。
在.container中包装您的所有内容会在您的内容中添加15px左右填充，除非您不在.row内放置所有内容（补偿）），就像在所有Bootstrap示例中一样。

确保您的标记正确并经过验证。我还添加了一个小CSS：

#sections .section {
  padding-top: 10vh;
}

...以补偿导航栏的高度。
但是，请注意 不建议将导航栏放在可扩展的单位（vh） 中。你应该坚持使用Bootstrap的默认值（50px）。固定导航10vh的问题是它会在纵向模式下在移动设备上占用太多空间，而在横向模式下不足以触摸事件。所以，恕我直言，您应该将.section s的顶部填充和导航栏高度更改回~50px（min 42px）。重要的是你应该 使用px而不是vh来获取导航栏高度 。

这是：

＆＃13;

$(document).ready(function() {
  $('#sections').fullpage();
});

＆＃13;

.body {
  font-family: 'Roboto', sans-serif;
  color: black;
}
.navbar.navbar-default {
  background-color: #FFFFFF;
  height: 10vh;
  z-index: 100;
}

.navbar.navbar-default ul {
  list-style-type: none;
  text-align: center;
}

.navbar.navbar-default ul li {
  display: inline-block;
}

.dropdown-menu li {
  text-align: center;
}

.dropdown .dropdown-menu {
  background-color: #FFFFFF;
}

.dropdown .dropdown-menu a {
  color: white;
}

.navbar.navbar-default ul li a {
  display: inline-block;
  padding: 3.5vh 8px 4px;
  color: black;
  text-decoration: none;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul li:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 3px;
  background-color: black;
  border-radius: 9px;
  transition: all .2s;
}

.nav.navbar-nav,
.nav.navbar-nav>li {
  float: none;
}

.navbar.navbar-default ul li:hover:after {
  right: 0;
  left: 0;
}

.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
  position: relative;
  display: block;
} 

.one {
  background-color:#c00;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
}

.two {
  background: #563D7C;
}
#sections .section {
  padding-top: 10vh;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>


<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#section3">Contact</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li><a href="#">Separated link</a>
                        </li>
                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li><a href="#">Separated link</a>
                        </li>

                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Clients</a>
                </li>
                <li><a href="#contact-me">Contact Me</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<div id="sections">
    <div class="section one">
        <div class="jumbotron text-center">
            <h1>My First Bootstrap Page</h1>
            <p>Resize this responsive page to see the effect!</p>
        </div>
        <a href="#section two"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
    </div>
    <div class="section two"></div>
</div>

＆＃13;

附加说明：

fullpage.js为您处理全部内容。但是，我碰巧相信这是CSS能够在没有任何js的情况下做的事情，原则上使用：

.section {
   min-height: 100vh;
}

...可能flexbox很好地对齐或分配孩子。

但是，使用fullpage.js，您不需要通过CSS进行此操作。

如何确定我的背景颜色填满整个网页背景？

1 个答案: