Как разместить нижний нижний колонтитул?

Question

У меня есть этот сайт:

link

Как вы можете видеть, сноска расположена в верхней части, и я хочу, чтобы дно, я ставлю картину более ясно понять, что они хотят сделать

КОД HTML:

<footer class="content-info" role="contentinfo"> 
    <div class="container-fluid no-padding"> 
    <div class="row"> 

     <div class="col-md-4 col-address"> 
     <div class="contact"> 
      <div class="title-footer"> 
      <p class="title-footer">CONTACT</p> 
      </div> 
     <div class="content-footer"> 
      <ul> 
      <li> 
       <div class="img-footer"> 
       <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/address-footer.png"> 
       </div> 
       <div class="details-footer"> 
       <span>Rue de Marche 3, 1204 Geneva</span> 
       </div> 
      </li> 
      <li> 
       <div class="img-footer"> 
       <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/email-footer.png"> 
       </div> 
       <div class="details-footer"> 
       <span>info@bagelhousecafe.ch</span> 
       </div> 
      </li> 
      <li> 
       <div class="img-footer"> 
       <img class="phone-footer" src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/telephone-footer.png"> 
       </div> 
       <div class="details-footer"> 
       <span>+41 79 132 80 85</span> 
       </div> 
      </li> 
      </ul> 
     </div> 
     </div> 
     </div> 
     <div class="col-md-4 col-center "> 
     <div class="title-footer"> 
      <p class="title-footer">FOLLOW US</p> 
     </div> 
     <div class="content-footer"> 
      <ul class="follow"> 
      <li> 
       <div class="img-footer"> 
       <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/facebook-footer.png"> 
       </div> 
      </li> 
      <li> 
       <div class="img-footer"> 
       <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/twitter-footer.png"> 
       </div> 
      </li> 
      <li> 
       <div class="img-footer"> 
       <img class="phone-footer" src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/instagram-footer.png"> 
       </div> 
      </li> 
      </ul> 
     </div> 
     <div class="copyright"> 
      <p>Copyright © 2016 - 2016 Bagel House Cafe</p> 
      <p>All rights reserved</p> 
     </div> 
     </div> 
     <div class="col-md-4 newsletter"> 
     <div class="title-footer"> 
      <p class="title-footer">NEWSLETTER</p> 
     </div> 
     <div class="news-input"> 
      <script language="javascript" type="text/javascript" src="http://dg-design.ch/bagel/wp-content/plugins/email-newsletter/widget/widget.js"></script> 
<link rel="stylesheet" media="screen" type="text/css" href="http://dg-design.ch/bagel/wp-content/plugins/email-newsletter/widget/widget.css"> 
<div> 
    <div class="eemail_caption"> 
    Sign up for our email newsletters </div> 
    <div class="eemail_msg"> 
    <span id="eemail_msg"></span> 
    </div> 
    <div class="eemail_textbox"> 
    <input class="eemail_textbox_class" name="eemail_txt_email" id="eemail_txt_email" onkeypress="if(event.keyCode==13) eemail_submit_ajax('http://dg-design.ch/bagel/wp-admin/admin-ajax.php')" onblur="if(this.value=='') this.value='Enter email';" onfocus="if(this.value=='Enter email') this.value='';" value="Enter email" maxlength="150" type="text"> 
    </div> 
    <div class="eemail_button"> 
    <input class="eemail_textbox_button" name="eemail_txt_Button" id="eemail_txt_Button" onclick="return eemail_submit_ajax('http://dg-design.ch/bagel/wp-admin/admin-ajax.php')" value="Submit" type="button"> 
    </div> 
</div>   <p class="copyright dg">Website by DGdesign</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</footer> 

Не могли бы вы рассказать мне, почему это так высоко pozitioneaa? Могу ли я организовать его в CSS?

Заранее благодарен!

Answer 1

position:absolute вызывает 1 пиксель высоты вашего .wrapper .content, который создает всю суету. Просто замените его на position: static или position: relative. Это решает проблему.

.wrapper .content { 
    position: absolute;// this on line number 6739 of your css 
    margin:0; 
    color: #fff; 
    width: 100%; 
} 

Answer 2

если вы хотите починить его в положении

footer { 
    background: #7a1418; 
    position: fixed; 
    bottom: 0; 
} 

, но, казалось бы, есть еще там происходит

Answer 3

Сделать DIV с ID колонтитула и чем добавить нижний колонтитул DIV.

Link ваш CSS и CSS добавить следующее:

footer { 
    bottom: 0; 
    position: fixed; 
} 

А также вы должны добавить некоторое содержание в середине, так что вы увидите разностный

Answer 4

, если вы хотите, чтобы sitck в botoom экрана все время вы должны использовать

position: fixed; 
bottom: 0; 

, но если вы хотите, чтобы ваш колонтитул в конце использования этого:

<body> 

<div class='wrap'> 
site content 
</div> 

<footer> 
your footer 
</footer> 

</body> 

и КСС:

.wrap{width:100%;min-height: 100%;height: auto !important;height: 100%;margin: 0 auto 10%;} 

footer{bottom:0px;display:block;width:100%;height:auto;} 

на полях: 0 авто 10%; вы можете изменить 10%, чтобы установить высоту нижнего колонтитула.