Вытеснение с под fixed

321
04 июля 2017, 22:20

Имеется страница, состоящая из двух основных блоков (.header и .main). У блока .header установлен position fixed

Проблема состоит в том, что блок .main впадает в блок .header. Т.е. заезжает под блок .header.

body {margin: 5px;} 
 
.header { 
  position: fixed; 
  left: 5px; 
  right: 5px; 
  top: 5px; 
  height: 48px; 
  background-color: white; 
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red; 
} 
 
.main { 
  height: 120px; 
  background-color: white; 
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue; 
}
<div class="header"> 
</div> 
<div class="main"> 
</div>

Эту задачу можно решить, добавив ещё один блок такой же высоты, как и .header. Но это не подойдёт, так как в течении всего времени .header может изменять свою высоту (с помощью скрипта, изменением ширины и т. д.). При этом .main так же должен оставаться под .header, а он снова впадёт.

$(function() { 
  var $header = $('.header'); 
 
  setInterval(function() { 
    $header.animate({height: 96 + 'px'}, 400); 
       
    setTimeout(function() { 
      $header.animate({height: 48 + 'px'}, 400); 
    }, 800); 
     
    setTimeout(function() { 
      $header.css({height: 'auto'}).animate({right: 80 + '%'}, 400); 
       
      setTimeout(function() { 
        $header.animate({right: 5 + 'px'}, { 
          duration: 400, 
          complete: function() { 
            $header.css({height: 48 + 'px'}) 
          } 
        }); 
      }, 800); 
    }, 2600); 
  }, 5200); 
});
body {margin: 5px;} 
 
.header { 
  position: fixed; 
  left: 5px; 
  right: 5px; 
  top: 5px; 
  height: 48px; 
  background-color: white; 
  box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red; 
} 
 
.main { 
  height: 120px; 
  background-color: white; 
  box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue; 
} 
 
.displacer { 
  height: 48px; 
  background-color: white; 
  box-shadow: inset 2px 2px 0px green, inset -2px 2px 0px green, inset 2px -2px 0px green, inset -2px -2px 0px green; 
  visibility: hidden; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="displacer"> 
</div> 
<div class="header"> 
  <div style="width: 100px; height: 48px;"></div> 
  <div style="width: 100px; height: 48px;"></div> 
</div> 
<div class="main"> 
</div>

В общем, вот:

  • .header может изменять размер, но при этом, .main всё равно должен оставаться под ним.
  • .header должен оставаться на своём месте - сверху страницы с position fixed

Как решить данный вопрос?

Answer 1

Создайте точно такой же элемент только добавьте ему position: static; и visibility: hidden; (что позволит занимать нужное место, но не отображать элемент).

.a, 
.b { 
  width: 100%; 
  height: 20px; 
} 
 
.a { 
  background: red; 
  position: absolute; 
} 
 
.b { 
  background: blue; 
} 
 
.a-clone { 
  position: static; 
}
<div class="a"></div> 
<div class="a a-clone"></div> 
<div class="b">Я не должен быть под красным блоком :с</div>

Те же вещи можно делать и с помощью Javascript и также задавать этому "клону" нужные margin при необходимости (для соответствующих значений top и left абсолютно позиционированного элемента).

Обновление

Если содержимое блока будет динамически меняться, то можно с помощью Javascript добавить обработчик изменения размеров самого блока, где присваивать новые значения размеров блока "клону" блока со статическим поционированием.

Answer 2

Есть вариант, если используете препроцессор LESS. Там есть возможность создавать переменную и совершать с ней математические операции, а возможность постоянно находиться под блоком с атрибутом absolute позволит padding-top. Смотрите ссылку на www.codepen.io - https://codepen.io/alexseveneight/pen/BZrRLw

Как бы ни изменилась высота блока .a, блок .b всегда будет ниже.

READ ALSO
Как убрать отступы в textarea (Safari для iPad)?
CSS

Как убрать отступы в textarea (Safari для iPad)?

Столкнулся с такой проблемой, что у элемента textarea не получается полностью убрать отступ в Safari (iPad)Даже при margin: 0; padding: 0; border: 0; текст все равно...

 360
Некорректно работает псевдоэлемент :before
CSS

Некорректно работает псевдоэлемент :before

При добавлении псевдоэлемента :before (добавил текст) добавленный элемент дублируетсяНе могу понять, почему

 307
Как избавиться от мелькания белого фона при скролле страницы
CSS

Как избавиться от мелькания белого фона при скролле страницы

Всем приветСуть вопроса такая-на странице есть несколько фоновых изображений

 293
Как поставить класс css по умолчению?
CSS

Как поставить класс css по умолчению?

Есть две кнопки - Таблица и СписокНажимаю на Таблица - объекты выводятся таблицей

 318