无法删除页脚下方的空白

Question

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

任何帮助表示赞赏，只是学习这方面的新代码。

https://jsfiddle.net/ptgL5pv6/1/

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;
}

即使在这样做之后，您的页脚也可能在其下方有 20 像素左右的空间，因为它们上方的内容不足。如果您希望您的页脚在任何设备中始终保持在底部，请将其添加到页脚的 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>