响应式背景图片div和固定的导航

Question

我有一个固定的导航，下面是响应div内包含的背景图像，因此它按比例调整大小。使用padding-bottom =图片高度/宽度* 100使其具有响应性。下方有一个内容部分，必须将其拉高以与该背景图像div重叠。为此，我尝试了在背景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

您可以通过将<div id="content"></div>放在<div id="background"></div>内来解决此问题。例如：

<div id="background">

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

</div>

由于某种原因，您不想这样做，也可以通过将content div的位置设置为absolute和top来进行跟踪：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 2

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

#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 3

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

然后，对第一个具有'position：relative'（在您的代码= margin-top:|fixed-nav's height|中）的元素使用#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>