Material Design Lite и Bootstrap Sticky Footer

Я создаю сайт, на котором использую липкий нижний колонтитул и панель навигации Bootstrap. Однако с недавним выпуском Google библиотеки Material Design Lite я хочу использовать карточки для часть моего сайта. Однако, как только я включаю библиотеку MDL (только CSS, никаких других изменений), мой липкий нижний колонтитул делает что-то странное. Нижний колонтитул устанавливается в нижней части окна просмотра (независимо от высоты этого окна), но затем он просто остается там. Если я прокручиваю вверх, он тоже прокручивается вверх.

Когда я на самом деле проверяю нижний колонтитул, тело и т. д., я не вижу ничего, что могло бы повлиять на макет из CSS материального дизайна. Что-то, очевидно, есть, но я довольно застрял на том, что это может быть. (Чтобы увидеть, как это работает, удалите ссылку на material-lite.css. В настоящее время она не работает во фрагменте кода.)

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
  padding-bottom: 20px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  color: white;
  background-color: black;
}
#footer-content {
  margin: 20px 0;
}
<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.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a asp-controller="Home" asp-action="Index" class="navbar-brand">
        <i class="fa fa-globe fa-lg visible-sm visible-xs"></i>
        <i class="fa fa-globe fa-3x hidden-sm hidden-xs"></i>
      </a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav main-links">
        <li><a asp-controller="Home" asp-action="Index">Home</a>
        </li>
        <li><a asp-controller="Home" asp-action="About">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <img src="http://placekitten.com/300/450" />
  <br/>
  <img src="http://placekitten.com/300/450" />
  <br/>
</div>

<footer>
  <div class="container">
    <div id="footer-content" class="pull-right">
      My Footer
    </div>
  </div>
</footer>


css twitter-bootstrap-3 material-design-lite
person JasCav    schedule 13.07.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это должно решить вашу проблему. См. планкер.

html {
  height: auto;
}
person iurii    schedule 13.07.2015
comment
Ага... так получилось. Я полностью пропустил изменение высоты в material-lite.css. (Как ни странно, Chrome видит его как styleguide.css). В любом случае, спасибо. - person JasCav; 13.07.2015
comment
Я считаю, что он показан как styleguide.css, потому что хранилище. googleapis.com/code.getmdl.io/1.0.0/material.min.css имеет набор sourceMappingURL - person iurii; 13.07.2015

arrow_upward
3
arrow_downward

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

https://github.com/google/material-design-lite/issues/913

В этой скрипте js были полезные html и css.

http://jsfiddle.net/eggbox/gk7u32b6/

Короче говоря, добавьте это в свой html над нижним колонтитулом

<style>
  .mdl-layout__content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
 }

 .mdl-layout__content > *:not(.mdl-layout-spacer) {
 -webkit-flex: none;
 -ms-flex: none;
 flex: none;
 }
</style>

<div class="mdl-layout-spacer"></div>

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer--middle-section">
    <div class="mdl-logo">Title</div>
      <ul class="mdl-mini-footer--link-list">
        <li><a href="#">Help</a></li>
        <li><a href="#">Privacy & Terms</a></li>
      </ul>
    </div>
</footer>
person Ian Poston Framer    schedule 16.12.2015