Мой нижний колонтитул абсолютно нормальный при нормальном размере экрана, но я хочу, чтобы он становился невидимым, когда я уменьшаю экран после определенной высоты. Есть идеи, как это сделать без использования javascript? Мои фрагменты HTML и CSS следующие:

HTML:

<footer class="footer">
        About
</footer>

CSS:

.footer{
    position: fixed;
    bottom: 0;
    margin: 0;
    padding: 10px;
    width: 100%;
    box-shadow: 0 0 3px white;
    color:white;
}
1
user3452721 7 Май 2014 в 02:27

3 ответа

Лучший ответ

jsFiddle Demo

Используйте медиа-запрос максимальной высоты на своей странице, чтобы скрыть нижний колонтитул. Обратите внимание, что это совместимо с почти всеми браузерами, кроме IE8-.

Html для демонстрации

 <div id="footer">Footer</div>

Css

@media (max-height:150px) {
 #footer{
  display:none;    
 }
}
1
Travis J 6 Май 2014 в 22:33

Использовать это:

@media screen and (max-width: 500px) {
    .footer {
        display: none;
    }
}

DEMO и Source

0
Sharikov Vladislav 6 Май 2014 в 22:33

Попробуйте выполнить медиа-запрос в своем CSS-документе следующим образом:

media screen and (max-height:700px) {
  .footer {
    display:none;
  }
}

Медиа-запросы принимают множество различных аргументов, например минимальную высоту, минимальную и максимальную ширину и т. Д. Mozilla dev содержит отличные примеры операторов.

0
user2246364user2246364 6 Май 2014 в 22:37