无法删除页脚下方的白色 space

Question

我的页脚下方有一大块白色 space，不知道如何删除它。基本上我希望页脚下方的所有内容都消失。

感谢任何帮助，只是学习对此如此陌生的代码。

function active() {
  var search_bar = document.getElementById('search_bar');
  if (search_bar.value == 'Search') {
    search_bar.value = '';
    search_bar.placeholder = 'Search';
  }
}

function inactive() {
  var search_bar = document.getElementById('search_bar');
  if (search_bar.value == '') {
    search_bar.value = 'Search';
    search_bar.placeholder = '';
  }
}

body {
  background: #efefef;
  margin: 0 auto;
  font-family: Verdana, Arial, sans-serif;
}

.container {}

.top_section {
  background: #000;
  padding: 20px;
}

.first_image {
  position: relative;
  text-align: center;
}

.nav_bar {
  background: #222b2f;
  border: 10px solid #222B2F;
  font-size: 18px;
  font-weight: bold;
  text-transform: none;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.nav_bar a {
  position: relative;
  color: #fff;
  Text-decoration: none;
  padding: 20px;
}

.nav_bar a:hover {
  color: #fff;
  Text-decoration: underline;
}

.third_bar {
  background: #000;
  position: relative;
  height: 350px;
}

.second_image {
  position: relative;
  text-align: center;
  height: 370px;
}

#search_bar {
  position: relative;
  bottom: 50px;
  height: 150px;
  border: 1px solid #000;
  border-right: none;
  font-size: 36px;
  padding: 10px;
  outline: none;
  width: 800px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-botton-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  right: 110px;
}

#search_button {
  position: relative;
  width: 200px;
  bottom: 222px;
  height: 172px;
  border: 1px solid #000;
  font-size: 36px;
  padding: 10px;
  background: #f1d826;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-botton-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  left: 710px;
}

#search_button:hover {
  background: #f6e049;
}

.form {
  width: 200px;
  margin-top: -220px;
  padding-left: 280px;
}

.footer {
  position: relative;
  background: #000;
  color: #fff;
  bottom: -10px;
}

.copyright {
  position: relative;
  bottom: -8px;
  left: 0;
  overflow: hidden;
}

.footer_notes {
  position: relative;
  text-align: center;
  bottom: 10px;
  left: 100px;
  overflow: hidden;
}

<div id="container">
  <div class="top_section">
    <div class="first_image">
      <a href="#"><img src="logo.png" /></a>
    </div>
  </div>

  <div class="nav_bar">
    <a href="#"> Home</a>
    <a href="#"> Search</a>
    <a href="#"> About us</a>
    <a href="#"> Products & Pricing</a>
    <a href="#"> Contact us</a>
    <a href="#"> login</a>
  </div>

  <div class="third_bar">
    <div class="second_image">
      <img src="whisky.png">
    </div>
    <div class="form">
      <form action="search.php" method="post">
        <input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();" />
        <input type="submit" id="search_button" value="Go!" />
      </form>
    </div>
  </div>

  <div class="footer">
    <div class="copyright">
      &copy test.com &reg
    </div>
    <div class="footer_notes">
      test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
    </div>
  </div>
</div>

Answer 1

首先，编辑此 .footer-notes css 并从中删除 left:100px;。它使您的页面宽度大于 100%

.footer_notes{
  position: relative;
  text-align: center;
  bottom: 10px;
  padding-left: 100px;
  overflow: hidden;
  max-width:100%;
}

然后不要在 .third-bar 上声明高度这会使您的页脚出现，即使它们在页脚上方

.third_bar{
    background:#000000;
    position: relative;
}

即使这样做之后，您的页脚下方可能还有 20px 左右 space，因为上面的内容不够。如果您希望您的页脚在任何设备中始终位于底部，请将此添加到页脚的 css.

.footer{
    position:fixed;
    background: #000000;
    color: #ffffff;
    bottom:0px;
  width:100%;
}

如果您完成所有三项更改，您的页面将如下所示：

function active(){ 
  var search_bar= document.getElementById('search_bar'); 
 if(search_bar.value == 'Search'){ 
 search_bar.value='' 
 search_bar.placeholder= 'Search' 
 }  
} 

 function inactive(){ 
  var search_bar= document.getElementById('search_bar'); 
 if(search_bar.value == ''){ 
 search_bar.value='Search' 
 search_bar.placeholder= '' 
 }  
}

body {
 background: #efefef;
 margin: 0 auto;
 font-family: Verdana,Arial,sans-serif;
}

#container{
 display:flex;
 flex-direction:column;
 height:100vh;
 overflow:hidden;
 background-color:black
}

.top_section {
 background:#000000;
 padding: 20px;
}

.first_image{
  position: relative;
  text-align: center;
}
.nav_bar {
 background: #222b2f;
 border: 10px; solid #222B2F;
 font-size: 18px;
 font-weight: bold;
 text-transform: none;
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
}

.nav_bar a{
 position: relative;
 color:#ffffff;
 text-decoration:none;
 padding: 20px;
}

.nav_bar a:hover{
 color: #ffffff;
 text-decoration:underline;
}

.third_bar{
 background:#000000;
 position: relative;

}

.second_image{
 position: relative;
 text-align: center;
 height:80vh;
 background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg");
 background-position:center;
 background-repeat:no-repeat;
 background-size:cover;
}

#search_bar
{
 position: relative;
 bottom: 50px;
 height: 150px;
 border:1px solid #000000;
 border-right: none;
 font-size: 36px;
 padding: 10px;
 outline:none;
 width: 800px;
 -webkit-border-top-left-radius:10px;
 -webkit-border-botton-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-bottomleft:10px;
 border-top-left-radius: 10px;
 border-bottom-left-radius: 10px;
 right:110px;
}

#search_button
{
 position: relative;
 width: 200px;
 bottom: 222px;
 height: 172px;
 border: 1px solid #000000;
 font-size: 36px;
 padding: 10px;
 background: #f1d826;
 font-weight: bold;
 cursor: pointer;
 outline: none;
 -webkit-border-top-right-radius:10px;
 -webkit-border-botton-right-radius: 10px;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-bottomright:10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 left: 710px;
}

#search_button:hover
{
background:#f6e049;
}



.form{
 width:200px;
 margin-top: -300px;
 padding-left:280px;

}

.footer
{
 position: fixed;
 background: #000000;
 color: #ffffff;
 bottom: 0px;
  width:100%;

}
.copyright
{
position: relative;
bottom: -8px;
left: 0px;
overflow: hidden;
}

.footer_notes

{

position: relative;
text-align: center;
bottom: 10px;
margin-left: 100px;
overflow: hidden;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"> 

 <div class="top_section"> 
  <div class="first_image"> 
  <a href="#"><img src="logo.png"/></a> 
  </div> 
 </div> 

 <div class="nav_bar"> 
 <a href ="#"> Home</a> 
 <a href ="#"> Search</a> 
 <a href ="#"> About us</a> 
 <a href ="#"> Products & Pricing</a> 
 <a href ="#"> Contact us</a> 
 <a href ="#"> login</a> 
 </div> 

 <div class="third_bar"> 
  <div class="second_image"> 
  </div> 
  <div class="form"><form action= "search.php" method="post"> 
   <input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="search_button" value="Go!"/> 
   </form>  
   </div> 
 </div> 
    
 <div class="footer"> 
  <div class="copyright"> 
  &copy test.com &reg 
  </div> 
  <div class="footer_notes"> 
  test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet. 
  </div> 
 </div> 
  
</div>

无法删除页脚下方的白色 space

Cannot remove white space below footer

css

whitespace

footer