Невозможно удалить пробел ниже нижнего колонтитула

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

Firt всего, редактировать этот .footer-notes CSS и удалить left:100px; из него. Это делает вашу ширину страницы больше чем 100%

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

затем DonT объявить высоту на .third-bar это делает вашу сноску придумать даже если их содержание выше сноски

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

Даже после того, как делать это футер будет иметь место размером 20 пикселей или около того, потому что их недостаточно для содержания над ним. Если вы хотите, чтобы нижний колонтитул всегда оставался внизу на любом устройстве, добавьте его в css нижнего колонтитула.

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

Если вы пройти через все три изменения, это то, что ваша страница будет выглядеть следующим образом:

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

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

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

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

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

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

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

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

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

 
} 
 

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

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

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

 
#search_button:hover 
 
{ 
 
background:#f6e049; 
 
} 
 

 

 

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

 
} 
 

 
.footer 
 
{ 
 
\t position: fixed; 
 
\t background: #000000; 
 
\t color: #ffffff; 
 
\t 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"> 
 

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

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

 
\t <div class="third_bar"> 
 
\t \t <div class="second_image"> 
 
\t \t </div> 
 
\t \t <div class="form"><form action= "search.php" method="post"> 
 
\t \t \t <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!"/> 
 
\t \t \t </form> \t 
 
\t \t \t </div> 
 
\t </div> 
 
\t \t \t 
 
\t <div class="footer"> 
 
\t \t <div class="copyright"> 
 
\t \t &copy test.com &reg 
 
\t \t </div> 
 
\t \t <div class="footer_notes"> 
 
\t \t test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet. 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
</div>