0

Есть фиксированная шапка(в верху экрана) высотой в 40px. Но она закрывает под собой часть контента.

Как это исправить? Пробовал задать ей margin-bottom: 40px - не помогло.

#header {
  width: 100%;
  position: fixed;
  overflow: hidden;
  z-index: 3;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header id="header">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

1
  • можете дать пример кода?
    – Vadim
    Commented 18 авг. 2017 в 15:39

2 ответа 2

2

Посмотрите данную статью о позиционировании элементов http://htmlbook.ru/css/position

Я бы советовал вам не отталкивать следующий блок, а задать отступ для body. Смотрите наперед: если по какой-либо причине вы удалите блок, который идет за шапкой, или решите поменять блоки местами, то у вас снова блок залезет под шапку, т.к. у него не будет отступа. Если же задавать отступ для body, относительно которого позиционируется header, то такой проблемы не возникнет.

В примере ниже header фиксированно позиционируется относительно body, а для body задается отступ, равный высоте шапки. Все остальные блоки прекрасно себя чувствуют, ничего не зная о header.

http://codepen.io/d-batmanov/pen/MvVvvx

body {
  padding: 0;
  margin: 0;
  padding-top: 40px;
}
.header {
  width: 100%;
  height: 40px;
  border: 1px solid red;
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  border: 1px solid black;
  height: 800px;
}
<div class="header">Fixed header</div>
<div class="content">
  <ul class="list-item">
    <li class="item"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae minima veritatis amet vero officiis error deleniti eos, necessitatibus iusto asperiores quis laboriosam natus commodi rem aliquam recusandae molestiae atque quo?</div></li>
    <li class="item"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus consectetur, maxime voluptas ad dolores numquam tempora odio ipsa laboriosam quae quibusdam, aut a sapiente odit non adipisci perspiciatis. Vitae, repudiandae.</div></li>
    <li class="item"><div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, dolorem corrupti dicta atque, et mollitia obcaecati in exercitationem distinctio sunt sit ea id sapiente. Fugiat pariatur est iste earum itaque.</div></li>
</ul>

2
  • 1
    И это тоже не будет работать если высота фиксированного блока переменная (например, зависит от ширины окна браузера). Commented 21 авг. 2017 в 5:40
  • Как же выйти из такого положения? На экранах разного размера фиксированный хедер меняет высоту и нижние блоки оказываются скрытыми под ним, а необходимо, чтобы при разной высоте хедера нижние блоки располагались строго под ним...
    – JBlack
    Commented 2 июн. 2020 в 13:20
0

Блоки с display: fixed; не участвуют в общем потоке рендеринга. Поэтому и не работает. Надо задать блоку, который закрывается этой шапкой, margin-top: 40px;

1
  • 2
    Это не будет работать если высота фиксированного блока переменная (например, зависит от ширины окна браузера). Commented 21 авг. 2017 в 5:40

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.