Нижний колонтитул внизу страницы

Question

Я пытаюсь создать класс нижнего колонтитула, однако он, кажется, находится в нижней части моего класса .body-wrap, в отличие от фактической страницы.

.body-wrap { 
 
    height: 100%; 
 
    padding-top: 3%; 
 
    padding-left: 20%; 
 
    padding-right: 20%; 
 
} 
 
.footer-wrap { 
 
    border: 1px black solid; 
 
    position: relative; 
 
    z-index: 10; 
 
    height: 3em; 
 
    margin-top: -3em; 
 
    text-align: center; 
 
}

<div id="page-content-wrapper"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 

 
     <div class="header-wrap"> 
 
      <a href="#menu-toggle" class="menu-toggle"> 
 
      <img class="hamburger-toggle" src="./img/menu.svg"> 
 
      </a> 
 
      <img class="logo" src="./img/Spark.svg"> 
 
      <img class="text-logo" src="./img/Spark-grey-text.svg"> 
 
     </div> 
 

 
     <div class="body-wrap"> 
 
      <h1>Hi Dave.</h1> 
 
      <h2>Got an idea? Share it on Spark.</h2> 
 
     </div> 
 

 
     <div class="footer-wrap"> 
 
      <p>footer text.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Я также использую самозагрузки шаблон боковой панели. Найдено здесь: http://startbootstrap.com/template-overviews/simple-sidebar/

Справка будет принята с благодарностью.

Answer 1

Пожалуйста, попробуйте добавить этот код:

.footer-wrap { 
     border: 1px black solid; 
     position: fixed; 
     z-index: 10; 
     height: 3em; 
     margin-top: -3em; 
     text-align: center; 
     width: 100%; 
     bottom: 0; 
     left: 0; 
    } 

Answer 2

Использование position:fixed с bottom:0 он будет оставаться стабильным на уровне нижней части страницы

.body-wrap { 
 
    height: 100%; 
 
    padding-top: 3%; 
 
    padding-left: 20%; 
 
    padding-right: 20%; 
 
} 
 
.footer-wrap { 
 
    border: 1px black solid; 
 
    position: fixed; 
 
    bottom:0; 
 
    z-index: 10; 
 
    height: 3em; 
 
    margin-top: -3em; 
 
    text-align: center; 
 
}

<div id="page-content-wrapper"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 

 
     <div class="header-wrap"> 
 
      <a href="#menu-toggle" class="menu-toggle"> 
 
      <img class="hamburger-toggle" src="./img/menu.svg"> 
 
      </a> 
 
      <img class="logo" src="./img/Spark.svg"> 
 
      <img class="text-logo" src="./img/Spark-grey-text.svg"> 
 
     </div> 
 

 
     <div class="body-wrap"> 
 
      <h1>Hi Dave.</h1> 
 
      <h2>Got an idea? Share it on Spark.</h2> 
 
     </div> 
 

 
     <div class="footer-wrap"> 
 
      <p>footer text.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Вы должны были бы position: fixed и bottom: 0 на ваш footer-wrap. Проверьте обновление ниже!

.body-wrap { 
 
    height: 100%; 
 
    padding-top: 3%; 
 
    padding-left: 20%; 
 
    padding-right: 20%; 
 
} 
 
.footer-wrap { 
 
    border: 1px black solid; 
 
    position: fixed; 
 
    z-index: 10; 
 
    height: 3em; 
 
    margin-top: -3em; 
 
    text-align: center; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="page-content-wrapper"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 

 
     <div class="header-wrap"> 
 
      <a href="#menu-toggle" class="menu-toggle"> 
 
      <img class="hamburger-toggle" src="./img/menu.svg"> 
 
      </a> 
 
      <img class="logo" src="./img/Spark.svg"> 
 
      <img class="text-logo" src="./img/Spark-grey-text.svg"> 
 
     </div> 
 

 
     <div class="body-wrap"> 
 
      <h1>Hi Dave.</h1> 
 
      <h2>Got an idea? Share it on Spark.</h2> 
 
     </div> 
 

 
     <div class="footer-wrap"> 
 
      <p>footer text.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

.body-wrap { 
 
    height: 100%; 
 
    padding-top: 3%; 
 
    padding-left: 20%; 
 
    padding-right: 20%; 
 
} 
 
.footer-wrap { 
 
    width:100%; 
 
    border: 1px black solid; 
 
    position: absolute; 
 
    bottom:0px; 
 
    z-index: 10; 
 
    height: 3em; 
 
    margin-top: -3em; 
 
    text-align: center; 
 
}

<div id="page-content-wrapper"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 

 
     <div class="header-wrap"> 
 
      <a href="#menu-toggle" class="menu-toggle"> 
 
      <img class="hamburger-toggle" src="./img/menu.svg"> 
 
      </a> 
 
      <img class="logo" src="./img/Spark.svg"> 
 
      <img class="text-logo" src="./img/Spark-grey-text.svg"> 
 
     </div> 
 

 
     <div class="body-wrap"> 
 
      <h1>Hi Dave.</h1> 
 
      <h2>Got an idea? Share it on Spark.</h2> 
 
     </div> 
 

 
     <div class="footer-wrap"> 
 
      <p>footer text.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 5

ширина Сложение и высота вашей .body-wrap и ширине колонтитул тоже. Изменяет положение нижнего колонтитула, как показано ниже.

.body-wrap { 
    width:200px; 
    height: 200px; 
    padding-top: 3%; 
    padding-left: 20%; 
    padding-right: 20%; 
    background:#111; 
    color:#fff; 
} 
.footer-wrap { 
    border: 1px black solid; 
    z-index: 9; 
    height: 3em; 
    text-align: center; 
    background:#f22; 
    bottom:0; 
    position:absolute; 
    width:100%; 
}