Странное поведение нижнего колонтитула

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

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

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

Я использую один и тот же класс нижнего колонтитула на обеих страницах, поэтому я не уверен, что здесь не так, как указано ниже:

.shell3-Footer {
box-sizing: border-box;
padding: 0.9375rem;
border-top: 0.0625rem solid #dcdcdc;
overflow: hidden;
max-height:40px;
width:100%;
background-color:#f5f5f5;
position:absolute; }

Обратите внимание, что если я изменю положение на фиксированное, то проблема будет решена лишь частично, так как мне нужно, чтобы нижний колонтитул был виден только при прокрутке вниз страницы. Кроме того, когда используется position:fixed, я не могу видеть стрелку вниз на полосе прокрутки, что не является желаемым поведением.

Кроме того, под ошибочным нижним колонтитулом есть небольшой пробел, который я исправил, добавив к нему bottom:0px.

Может ли кто-нибудь помочь, почему один и тот же класс нижнего колонтитула будет вести себя по-разному на двух страницах? Мысли?


person Manan Shah    schedule 04.07.2017    source источник
comment
Если обе страницы имеют один и тот же класс, скорее всего, это не из-за того, что класс вызывает разницу в поведении. Знаете ли вы какие-либо другие стили, которые можно было бы добавить на страницу, чтобы сделать эти две страницы разными?   -  person aug    schedule 04.07.2017
comment
было бы проще, если бы вы показали нам код, как css, так и html   -  person ZombieChowder    schedule 04.07.2017
comment
Скорее всего, это проблема с вашей html-разметкой.   -  person Jordan Miguel    schedule 17.07.2017
comment
В конце концов я понял, что проблема была не в стиле нижнего колонтитула, а в других классах на неисправной странице. Я не хочу отвечать на свой вопрос, поскольку он был правильно указан августом в комментарии выше. Как закрыть это?   -  person Manan Shah    schedule 18.07.2017


Ответы (1)


Попробуй это:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Put this class on everything that is not the footer */
.content {
  flex: 1 0 auto; 
}

.shell3-Footer {
  flex-shrink: 0; /* new stuff */
  width:100%;
  background-color:#f5f5f5;
  box-sizing: border-box;
  padding: 0.9375rem;
  border-top: 0.0625rem solid #dcdcdc;
  overflow: hidden;
}
person ginkoid    schedule 04.07.2017