Как получить 100% высоту содержимого страницы при использовании фиксированного заголовка MDL в Chrome?

Я пытаюсь создать страницу с фиксированным заголовком, используя облегченный дизайн материалов. Проблема в том, что я не могу получить все пространство div page-content.

Предположим, я хочу покрасить в красный цвет всю страницу, кроме панели навигации. Это работает в Firefox:

<div class="page-content" style="height:100%">
          <div style="background:#ff0000;height:100%"></div>
</div>

codepen: http://codepen.io/anon/pen/qONpXQ

Точно такой же codepen не работает в Chrome. Как я могу получить все пространство в Chrome? Мне все равно, если решение сломает страницу в Firefox.


html material-design-lite
person gesuwall    schedule 21.09.2015    source источник
comment
Вы можете использовать height: 100vh, который установит высоту div на 100% от высоты области просмотра.   -  person mcclaskiem    schedule 21.09.2015
comment
пожалуйста, ссылайтесь на мой опубликованный ответ вместо этого решения.   -  person mcclaskiem    schedule 21.09.2015

Ответы (2)


arrow_upward
3
arrow_downward

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

В этом ручке кода я создал «фоновый цвет», используя псевдоэлемент, который позволяет прокручивать содержимое как обычно, но фон остается неподвижным.

http://codepen.io/mcclaskiem/pen/YyWYoP

.page-content{
  background-color:red;
  height: 100%;
  width: 100%;
  &:after {
    content: "";
    height: 100vh;
    width: 100%;
    background-color: red;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
person mcclaskiem    schedule 21.09.2015
comment
Это лучшее решение, хотя .page-content{height:100vh; background:#ff0000;} мне хватило с лихвой. - person gesuwall; 21.09.2015

arrow_upward
2
arrow_downward

По какой-то причине «контент страницы» в хроме не работает с процентами, что бы я ни делал. Я бы посоветовал вам либо использовать родительский div для вашего контента, либо определить высоту «контента страницы» в ems или пикселях.

У меня лично сейчас похожая проблема, и я, честно говоря, не могу ее решить

Изменить: решение mcclaskiem работает лучше, попробуйте этот codepen< /а>

person realappie    schedule 21.09.2015