Фиксированный заголовок перекрывает содержание ниже

У меня есть следующий HTML,Фиксированный заголовок перекрывает содержание ниже

header { 
 
    background: #f6f6f6; 
 
    width: 100%; 
 
    min-height: 120px; 
 
    position: fixed; 
 
    z-index: 100; 
 
    top: 0; 
 
    padding: 5px 0; 
 
}

<header> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <a href="index.html"> 
 
     <img src="images/logo.png" class="img-responsive" alt=""> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</header>

Как вы можете видеть, что это фиксированный заголовок, и я дал ему мин-высота 120px. Это приводит к тому, что заголовок перекрывает содержимое ниже, и я предотвратил это, предоставив div, который обертывает содержимое маржинальной вершиной 90px.

Это прекрасно работает при больших макетах, но когда макет становится меньше, и изображение начинает изменять размер (из-за класса с учетом .img), его высота уменьшается, и это приводит к пустому пространству под ним. Я мог бы написать медиа-запрос и уменьшить верхний край, но мне было интересно, есть ли другой способ предотвратить это.

источник

2016-02-19 Vinith Almeida

Добро пожаловать в прекрасный мир CSS и фиксированное позиционирование. Да, это принципиально нарушено. CSS был разработан в те дни, когда отзывчивость не была понятием. Отзывчивость - это то, что CSS только сейчас начинает приспосабливать к. И это будет за несколько лет до того, как проблема действительно будет решена. Существуют обходные пути и взломы, которые включают размещение заголовка дважды, один раз фиксированный и один раз, как часть прокручиваемого div «позади» фиксированной части. –

, пожалуйста, не возражайте создать https://jsfiddle.net/ –

Попробуйте использовать другое подразделение для поля, например '%', 'em' или' rem'. С некоторыми '@ media', чтобы помочь тоже. – Core972

Вы можете использовать JS для обновления поля на основе размера заголовка при загрузке страницы.

$(function() { 
    var headHeight = $('header').outerHeight(); 

    $('.welcome-home').css({'margin-top': headHeight }); 
});

Это позволит получить общую высоту header элемента, а затем применить этот размер, как margin-top к .welcome-home.

Вот скрипка: https://jsfiddle.net/13n7mpbk/ Если вы попытаетесь добавить в заголовок, он автоматически увеличит запас по мере необходимости, когда страница будет загружена.

источник

2016-02-19 09:37:36

Фиксированный заголовок перекрывает содержание ниже

ответ

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