Проблема с перекрывающимся содержимым с отзывчивым div фонового изображения и фиксированной навигацией

Question

У меня фиксированная навигация, а внизу фоновое изображение, содержащееся внутри отзывчивого элемента div, поэтому оно пропорционально изменяет размер.Использование padding-bottom = высота изображения / ширина * 100, чтобы сделать его отзывчивым.Ниже есть раздел контента, который нужно подтянуть, чтобы перекрыть этот фоновый div.Для этого я пробовал использовать отрицательное нижнее поле для фона div и отрицательное верхнее поле для содержимого содержимого.Когда вы уменьшаете экран вниз, отрицательное поле начинает вытягивать содержимое под фиксированной навигационной панелью и над экраном вне поля зрения.Он должен оставаться на виду, по крайней мере, на минимальном расстоянии ниже фиксированной навигации.Какой лучший способ сделать это?Чистое решение CSS предпочтительнее, если это возможно, но я могу использовать jQuery, если это не так.Спасибо за помощь.

Скрипка: https://jsfiddle.net/7ow9y41g/

 #fixed-nav {
        top: 0;
        background: #EEE;
        position: fixed;
        min-height: 2em;
        width: 100%;
      }
      
      #fixed-nav ul {
        display: flex;
        list-style-type: none;
      }
      
      #fixed-nav ul li {
        display: inline-block;
        width: 100%;
      }
      
      #background {
        background: orange;
        padding-bottom: 30%; /* padding-bottom = height/width * 100% */
        text-align: center;
        width: 100%;
      }
      
      #background h2 {
        color: rgba(255, 255, 255, .2);
        padding-top: 4em;
      }
      
      #content {
        margin-top: -18em;
      }

<div id="fixed-nav">
          <ul>
            <li>Nav Link One</li>
            <li>Second Nav Link</li>
            <li>Another Nav Link</li>
            <li>The Last Link</li>
          </ul>
        </div>

        <div id="background">
          <h2>div with background image</h2>
        </div>

        <div id="content">
          <h1>Page content overlaps</h1>
          
          <p>background-image padding-bottom = height/width * 100 for responsive 
            background image</p>
            
            <p>Lorem ipsum dolour sit met, consectetur adipiscing elit. Sed various 
              libero elit, iaculis consectetur justo dignissim eu. Suspendisse potenti. 
              Cras ullamcorper, felis quis molestie dignissim, nunc dui interdum metus, 
              ut laoreet odio risus eget libero.  Nullam sed iaculis metus. Fusce vestibulum 
              justo mauris, eu imperdiet tortor iaculis et. Duis volutpat porta ligula 
              sit amet vehicula. Donec iaculis aliquam ullamcorper. Suspendisse vitae 
              pharetra libero.</p>
              
              <p>Nullam enim mauris, hendrerit quis varius id, vehicula id dui. Praesent 
                varius lacus id faucibus rhoncus.Suspendisse potenti. Cras ullamcorper, 
                felis quis molestie dignissim, nunc dui interdum metus, ut laoreet odio 
                risus eget libero. Nullam sed iaculis metus. Fusce vestibulum justo mauris. 
                Praesent semper sed lectus in volutpat. Sed urna lectus, sodales vel 
                pharetra vitae, commodo vel orci. Vestibulum ante mauris, ultricies et magna at, 
                dictum suscipit nulla. Praesent libero metus, blandit eu hendrerit vel, 
                maximus et nunc.</p>
              </div>

Answer 1

Используйте параметр height для #fixed-nav вместо min-height.

Затем используйте параметр margin-top:|fixed-nav's height| для первого элемента, который имеет 'position: относительный' (в вашем коде =#background) .

И нет необходимости определять margin значение для #content ... просто используйте position: relative

body {
  margin: 0;
}

#fixed-nav {
  top: 0;
  background: #EEE;
  position: fixed;
  height: 50px;
  width: 100%;
}

#fixed-nav ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#fixed-nav ul li {
  display: inline-block;
  width: 100%;
}

#background {
  background: orange;
  min-height: 100px;
  padding: 30px 10px;
  margin-top: 50px;
  text-align: center;
  width: 100%;
}

#background h2 {
  color: rgba(255, 255, 255, .2)
}

#content {
  position: relative
}

<div id="fixed-nav">
  <ul>
    <li>Nav Link One</li>
    <li>Second Nav Link</li>
    <li>Another Nav Link</li>
    <li>The Last Link</li>
  </ul>
</div>

<div id="background">
  <h2>div with background image</h2>
</div>

<div id="content">
  <h1>Page content overlaps</h1>
  <p>background-image padding-bottom = height/width * 100 for responsive background image</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero elit, iaculis consectetur justo dignissim eu. Suspendisse potenti. Cras ullamcorper, felis quis molestie dignissim, nunc dui interdum metus, ut laoreet odio risus eget libero.<br/>Nullam sed iaculis metus. Fusce vestibulum justo mauris, eu imperdiet tortor iaculis et. Duis volutpat porta ligula sit amet vehicula. Donec iaculis aliquam ullamcorper. Suspendisse vitae pharetra libero.</p>
  <p>Nullam enim mauris, hendrerit quis varius id, vehicula id dui. Praesent varius lacus id faucibus rhoncus.Suspendisse potenti. Cras ullamcorper, felis quis molestie dignissim, nunc dui interdum metus, ut laoreet odio risus eget libero. Nullam sed iaculis metus.<br/>Fusce vestibulum justo mauris. Praesent semper sed lectus in volutpat. Sed urna lectus, sodales vel pharetra vitae, commodo vel orci. Vestibulum ante mauris, ultricies et magna at, dictum suscipit nulla. Praesent libero metus, blandit eu hendrerit vel, maximus et nunc.</p>
</div>

Answer 2

Вы можете решить эту проблему, поместив свой <div id="content"></div> внутрь <div id="background"></div>.Например:

<div id="background">

 <div id="content">
   margin-top: 0; 
 </div>

</div>

по какой-то причине вы не хотите этого делать, вы также можете сделать следующее, установив позиции div содержимого в абсолютные и верхние: 50px;но чем я буду рекомендовать установить z-index вашей навигационной панели, чтобы она могла оставаться на вершине .. например:

#fixed-nav {
  top: 0;
  background: #EEE;
  position: fixed;
  min-height: 2em;
  width: 100%;
  z-index: 999;
}


#content {
  position: absolute;
  top: 50px;
}

Надеюсь, это поможет.Счастливого кодирования и счастливых праздников!

Answer 3

Поправь меня, если я ошибаюсь, но, думаю, тебе нужно прибавить высоту.Вот мой код:

#fixed-nav {
    top: 0;
    background: #EEE;
    position: fixed;
    min-height: 2em;
    width: 100%;
    float: left;
}
#background {
    background: orange;
    text-align: center;
    width: 100%;
    height: 50px;
    float: left;
    margin-top: 50px;
}
#content {
    margin-top: 0;
    float: left;
}

Надеюсь, это поможет.Если нет, вам необходимо уточнить детали.