Липкий нижний колонтитул с переменной высотой в бутстрапе

Я пытаюсь получить липкий нижний колонтитул с настраиваемой высотой на моем веб-сайте, и это оказалось намного сложнее, чем я ожидал.Липкий нижний колонтитул с переменной высотой в бутстрапе

Вот снимок экрана моей сноски на данный момент:

Колонтитул покрывает мою контактную форму, потому что я явно установить высоту 419 пикселей.

На странице, где содержимое короче, чем экран, нижний колонтитул прилипает к нижнему пределу ... но только потому, что я явно задал высоту.

Вот мой CSS и HTML:

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background: #ffffff; 
 
} 
 

 
body > .container { 
 
    padding-bottom: 100px; 
 
} 
 

 
/* footer */ 
 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    /* Set the fixed height of the footer here */ 
 
    height: 419px; 
 
    background-color: #222; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title></title> 
 

 
    </head> 
 
    <body> 
 

 
     <!-- navigation --> 
 
     <nav class="navbar navbar-default"> 
 
      <div class="container"> 
 
       <div class="navbar-header"> 
 
        <a class="navbar-brand" href=""> 
 
         <img alt="" src=""> 
 
        </a> 
 
       </div> 
 
       <div id="navbar" class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav"> 
 
         <li> 
 
          <a class="" href=""> 
 
           <i class="fa fa-home" aria-hidden="true"></i> 
 
           Home 
 
          </a> 
 
         </li> 
 
         <li> 
 
          <a class="" href=""> 
 
           <i class="fa fa-certificate"></i> 
 
           Courses 
 
          </a> 
 
         </li> 
 
         <li> 
 
          <a class="" href=""> 
 
           <i class="fa fa-lightbulb-o"></i> 
 
           Our Method 
 
          </a> 
 
         </li> 
 
        </ul> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
         <li> 
 
          <a class="sign-in" href=""> 
 
           Dashboard 
 
           <i class="fa fa-tachometer"></i> 
 
          </a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav> 
 
     <!-- end navigation --> 
 

 
     <!-- main content --> 
 
     <main> 
 

 
     </main> 
 
     <!-- end main content --> 
 

 
     <!-- footer --> 
 
     <footer> 
 
      <div class="container-fluid bg-footer"> 
 
       <div class="container"> 
 

 
        <!-- footer menus --> 
 
        <div class="row"> 
 
         <div class="col-md-3"> 
 
          <h3>About</h3> 
 

 
         </div> 
 
         <div class="col-md-3"> 
 
          <h3>Help</h3> 
 
          <ul class="list-unstyled"> 
 
           <li> 
 
            <a href=""> 
 
             Go to a class 
 
            </a> 
 
           </li> 
 
           <li> 
 
            <a href=""> 
 
             Find an order 
 
            </a> 
 
           </li> 
 
           <li> 
 
            <a href=""> 
 
             Courses 
 
            </a> 
 
           </li> 
 
           <li> 
 
            <a href=""> 
 
             Jobs 
 
            </a> 
 
           </li> 
 
           <li> 
 
            <a href=""> 
 
             Contact us 
 
            </a> 
 
           </li> 
 
           <li> 
 
            <a href=""> 
 
             About us 
 
            </a> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
         <div class="col-md-3"> 
 
          <h3>Social</h3> 
 
          <ul class="list-unstyled"> 
 
           <li> 
 
            <h3> 
 
             <i class="fa fa-facebook" aria-hidden="true"></i> 
 
            </h3> 
 
           </li> 
 
           <li> 
 
            <h3> 
 
             <i class="fa fa-twitter" aria-hidden="true"></i> 
 
            </h3> 
 
           </li> 
 
           <li> 
 
            <h3> 
 
             <i class="fa fa-vk" aria-hidden="true"></i> 
 
            </h3> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
         <div class="col-md-3"> 
 
          <div class="form-group"> 
 
           <a class="btn btn-alt btn-block" href=""> 
 
            Student Login 
 
           </a> 
 
          </div> 
 
          <div class="form-group"> 
 
           <a class="btn btn-alt btn-block" href=""> 
 
            Teacher Login 
 
           </a> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <!-- end footer menus --> 
 

 
        <hr> 
 

 
        <!-- footer subtext --> 
 
        <div class="row"> 
 
         <div class="col-md-12"> 
 
          <span class="text-muted"> 
 
           High quality English lessons 
 
           <div class="pull-right"> 
 
            <a href="">Privacy</a> | <a href="">Terms and Conditions</a> 
 
           </div> 
 
          </span> 
 
         </div> 
 
        </div> 
 
        <!-- end footer subtext --> 
 

 
       </div> 
 
      </div> 
 

 
      <!-- sub footer --> 
 
      <div class="container-fluid bg-copyright"> 
 
       <div class="container"> 
 
        <p class="copyright"> 
 
         &copy; 2016 Toucan-Talk.com ltd 
 
        </p> 
 
       </div> 
 
      </div> 
 
      <!-- end sub footer --> 
 

 
     </footer> 
 
     <!-- end footer --> 
 

 
    </body> 
 
</html>

Как сделать колонтитула палку в нижней части страницы а). без наложения на мой контент и б). без необходимости явно устанавливать высоту нижнего колонтитула.

источник

2016-11-10 Jethro Hazelhurst

Просто увеличить 'обивку-bottom' из' тела> .container' высоты колонтитула .. тела> .container { padding-bottom: 419px; } – Manjunath

В вашем случае я бы рекомендовал использовать Flexbox. Одно большое преимущество использования Flexbox заключается в том, что вам больше не нужно устанавливать конкретную высоту в нижний колонтитул.

Вы можете просто добиться того, что вы хотите, просто изменив свой CSS к следующим

html, body { 
    height: 100%; 
} 

body { 
    background: #ffffff; 
    display: flex; 
    flex-flow: column; 
} 

footer { 
    margin-top: auto; 
    background-color: #222; 
}

источник

2016-11-10 12:48:53 SvenL

Dang, это просто работает ... ничего себе, без суеты, всего лишь CSS. ЭТО это решение, спасибо вам, ТАК МНОГО. –

@JethroHazelhurst Добро пожаловать, рад мог бы помочь. – SvenL

Если сноска имеет фиксированную высоту, просто изменить CSS к этому:

body { 
    background: #ffffff; 
    padding-bottom: 419px; 
}

источник

2016-11-10 11:52:45 Mdk

Попытка сделать это сейчас, однако это не меняет того факта, что мне придется отредактировать мой CSS, если меняет высота нижнего колонтитула, спасибо за ответ. –

Вам следует избегать большого количества отступов. Это не тот хороший ответ, поскольку использование этого большого количества дополнений создаст проблему с другими вещами. –

Хорошая точка ... это стандартная практика? –

Липкий нижний колонтитул с переменной высотой в бутстрапе

ответ

Смежные вопросы