响应式背景图片 div 和固定导航的重叠内容问题

Question

我有一个固定的导航，下面是响应式 div 中包含的背景图片，因此它会按比例调整大小。使用 padding-bottom = image height/width * 100 使其响应。下面有一个内容部分，必须将其拉起以与背景图像重叠 div。为此，我尝试在背景 div 上设置负下边距，在内容 div 上设置负上边距。当您缩小屏幕时，负边距开始将固定导航下方和屏幕上方的内容拉出视图。它需要在固定导航下方至少保持最小距离。最好的方法是什么？如果可能，首选纯 CSS 解决方案，但如果不是，我可以使用 jQuery。感谢您的帮助。

Fiddle: 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

如果我错了请纠正我，但我认为您需要添加高度。这是我的代码：

#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;
}

希望对您有所帮助。如果不是，需要详细说明。

Answer 2

对 #fixed-nav 使用 height 选项而不是 min-height。

然后，对具有 'position:relative' （在您的代码中 = #background）.[=20 的第一个元素使用 margin-top:|fixed-nav's height| 选项=]

而且，不需要为 #content 定义 margin 值...只需使用 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 3

您可以通过将 <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;
}

希望对您有所帮助。编码愉快，节日快乐！

响应式背景图片 div 和固定导航的重叠内容问题

Overlapping content issue with responsive background image div and fixed nav

html

css

responsive-design

margin

overlap