代码之家 › 专栏 › 技术社区 › John

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

overlap margin responsive-design css html

0

John · 技术社区 · 7 年前

我有一个固定导航,下面是一个背景图像,包含在一个响应div中,因此它按比例调整大小。使用padding bottom=图像高度/宽度*100使其响应。下面有一个内容部分,必须向上拉才能与背景图像部分重叠。为此,我在背景部分尝试了负底边距,在内容部分尝试了负顶边距。当您缩小屏幕时,负边距开始将固定导航下方和屏幕上方的内容移出视图。它需要在固定导航下方至少保持一个最小距离。最好的方法是什么?如果可能的话,最好使用纯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>

3 回复 | 直到 7 年前

1

Appy Sharma 7 年前

您可以通过放置 <div id="content"></div> 内部 <div id="background"></div> . 例如:

<div id="background">

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

</div>

由于某些原因,您不想这样做,您也可以通过将contentdivposition设置为absolute和top来执行以下操作:50px;但是,我建议您设置导航条的z索引,这样它就可以保持在顶部。。例如:

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


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

祝你节日快乐!

2

0

DaOneRom 7 年前

如果我错了,请纠正我,但我认为你需要增加高度。这是我的密码:

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

希望有帮助。如果没有,你需要详细说明细节。

3

0

Mordecai 7 年前

使用 height #fixed-nav 而不是 min-height .

然后,使用 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>