Question

好吧所以我几乎完成了我的网站的编码，我似乎无法从我的页面顶部删除这个空白区域无论如何我可以删除它或使其透明，以便我的背景覆盖整个页面。并且页面顶部没有白色显示？

要进行实时预览，请访问http://www.Trillumonopoly.com

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
 <script src="js/pushmenu.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
 <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
 <!--BOTTOM MENU 3d-->
 <style>
/* basic menu styles */
.block-menu {
display: block;
background: transparent; 
}

.block-menu li {
display: inline-block;
}

.block-menu li a {
color: #666;
display: block;
text-decoration: none;
font-family: 'Fjalla One', sans-serif !important;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 18px;
font-size: 20px;
padding: 15px 10px;
}

/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box, 
.three-d:focus .three-d-box {
    transform: translateZ(-25px) rotateX(90deg);
}

.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}

/* 
put the "front" and "back" elements into place with CSS transforms, 
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}

.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}

.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: GoldenRod;
padding: 17px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
</style> 
<style>
body { padding-bottom: 70px !important; 
   font-family: 'Fjalla One', sans-serif !important;
}

</style>
<style>
.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:5px 0 0;    height:65px !important; border-top-color:Orange  !important; background-color:Black  !important;};</style>

<style> html { 
background: url(images/background.jpg) fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<link rel="stylesheet" href="css/pushmenu.css">
</head>

<body>
<div id="container-fluid">
 <div class="menu">

  <!-- Menu icon -->
  <div class="icon-close">
    <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
  </div>

  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>


    <div id="contentarea">
    </div>
</div>  


  <nav class="navbar navbar-default navbar-fixed-bottom ">
<div class="container">
<div class="row">
<div class="col-sm-1 col-md-1 icon-menu">
        <center><span class="glyphicon glyphicon-headphones"></span>   </center>
</div>

<div class="col-sm-9 col-md-9">
<ul class="block-menu" id="navmenu">
<li><a href="/" class="three-d menu_nav" >
    Home
    <span aria-hidden="true" class="three-d-box">
        <span class="front">Home</span>
        <span class="back">Home</span>
    </span>
</a></li>
<li><a href="/demos" class="three-d menu_nav">
    Artist
    <span aria-hidden="true" class="three-d-box">
        <span class="front">Roster</span>
        <span class="back">Roster</span>
    </span>
</a></li>

<li><a href="pages/order.html" class="three-d menu_nav">
    Labels
    <span aria-hidden="true" class="three-d-box">
        <span class="front">Labels</span>
        <span class="back">Labels</span>
    </span>
</a></li>
<li><a href="/" class="three-d menu_nav">
    Music
    <span aria-hidden="true" class="three-d-box">
        <span class="front">Music</span>
        <span class="back">Music</span>
    </span>
</a></li>
<li><a href="/" class="three-d menu_nav">
    Videos
    <span aria-hidden="true" class="three-d-box">
        <span class="front">Videos</span>
        <span class="back">Videos</span>
    </span>
</a></li>
<li><a href="/" class="three-d menu_nav">
    Store
    <span aria-hidden="true" class="three-d-box">
        <span class="front">Store</span>
        <span class="back">Store</span>
    </span>
</a></li>
<li><a href="/" class="three-d menu_nav">
    Services
    <span aria-hidden="true" class="three-d-box">
        <span class="front">Services</span>
        <span class="back">Services</span>
    </span>
</a></li>

<div class="col-sm-2 col-md-2"> SOCIAL MEDIA LINKS HERE</div>

</div>
</div>
</nav>

<script src="js/nav.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/minicart/3.0.6/minicart.min.js"></script>
<script>
paypal.minicart.render();
</script>

Answer 1

你有：

padding-bottom: 70px !important;

在body上。删除它，白色条将消失。以下是代码中导致白条的CSS：

body { padding-bottom: 70px !important; 
   font-family: 'Fjalla One', sans-serif !important;
}

Answer 2

请从身体上移除填充物：

body {
    font-family: "Fjalla One",sans-serif !important;
    padding-bottom: 0 !important;
}

Answer 3

如果你想保留填充，我会说不要，你也可以将它添加到你的身体元素样式。

margin-top: -70px;

如何从页面顶部删除白条/导航

3 个答案: