Как предотвратить исчезновение контента за фиксированным заголовком? - PullRequest
Новая
       34

Как предотвратить исчезновение контента за фиксированным заголовком?

0 голосов
/ 26 марта 2019

У меня есть фиксированный заголовок, который перекрывает содержимое ниже.

Я попытался добавить padding-top / margin-top к телу, обертке страницы и разделу, но безуспешно. Я использую внутреннюю гибкую коробку div внутри заголовка, и у меня есть скрытая боковая панель, которая имеет 100% высоты, когда активна. У меня есть домашняя страница с изображением героя, высота которого составляет 100 Вч, а верхний слой 9 мм, который, кажется, работает, однако я не собираюсь использовать изображение героя на этой конкретной странице.

HTML: 

<body>
<div class="page-wrapper content">

<!-- HEADER -->
<header id="header">
  <div class="header-inner">
    <div class="header-col header-col-1">
      <div class="menu-trigger">
        <span class="menu-trigger-icon">
          <span class="menu-trigger-bar menu-trigger-bar-top"></span>
          <span class="menu-trigger-bar menu-trigger-bar-middle"></span>
          <span class="menu-trigger-bar menu-trigger-bar-bottom"></span>
        </span>
        <span class="menu-trigger-title">Menu</span>
      </div>
    </div>
    <div class="header-col header-col-2">
      <a class="logo" href="../index.html">
        <img src="" alt="">
      </a>
    </div>
    <div class="header-col header-col-3">
      <a class="click-to-call" href="tel:+44-1492-877-832">
        <i class="fas fa-phone"></i>
      </a>
      <a class="btn-book-now" href="">Book Now</a>
    </div>
  </div>
</header>
<!-- END / HEADER -->

<!-- SIDE NAV -->
<nav class="side-nav">
  <div class="side-nav-inner">
    <ul class="main-menu">
      <li>
        <a href="../index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="rooms.html">Rooms</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
      <li>
        <a href="">Book Now</a>
      </li>
    </ul>      
    <ul class="social-media">
      <li>
        <a href="">
          <i class="fab fa-facebook-f"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="fab fa-instagram"></i>
        </a>
      </li>
    </ul>
  </div>
</nav>
<!-- END / SIDE NAV -->

<main id="main">

  <section class="about">
    <div class="about-inner">
      <h1>About Us</h1>
      <span class="hr"></span>

CSS: 

#header {
  background: #fdd400;
  -webkit-box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 99;
}

.header-inner {
  display: flex;
  flex-direction: row;
  height: 9rem;
  margin: 0 6%;
}

#main {
  background: #fff;
  width: 100%;
}

.about {
  background: #fff;
  width: 100%;
}

.about-inner {
  align-items: center;
  color: #2c2a29;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 6%;
  padding: 6rem 0;
  text-align: center;

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

Я пытался воссоздать ваш проект в изолированной программной среде кода, основываясь на том, что вы вставили, чтобы понять, в чем проблема. Я думаю, что некоторые стили отсутствуют, но, по крайней мере, то, чего вы пытаетесь достичь, можно сделать, поместив div и main и sidebar в div содержимого, а затем сместив его вниз. Вот так: 

.content {
  position: absolute;
  top: 9rem;
  display: flex;
  width: 100%;
  overflow: scroll;
}

Есть и другие способы, такие как заполнение содержимого вниз, но это также может создать некоторые побочные эффекты.

Вы можете посмотреть здесь:

https://03jknqq7kw.codesandbox.io/

0 голосов
/ 26 марта 2019

A padding-top на #main должно работать, между прочим, если только другой CSS-объект не мешает или вы не можете предсказать высоту заголовка.

...