Question

小提琴：http://jsfiddle.net/rg3w8kxc/2/

我的顶部有一个固定的条，下面有一个元素。由于顶部条是固定的，我需要在它下面的元素顶部添加一些填充，以便显示该元素的整个高度。但是，当我添加类似padding-top:40px之类的内容时，它不会将元素向下移动;相反，它会在元素下方创建空间。与margin相同。

我觉得我错过了一些明显的东西。这有什么问题？

这是我的HTML：

<div id="top-bar">
        <div class="section-wrap">
            <a href="/">Win a [name of phone]!</a>
        </div><!-- .section-wrap -->
    </div>

<div id="top-section-page">
        <div class="section-wrap">
            <a href="/"><span>⇦</span> Back to the mix</a>
        </div>
</div>
<p>Some text here</p>

这是我的CSS：

#top-bar {
  background: #FAFAFA;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  position: fixed;
  width: 100%;
  z-index: 999;
}

#top-section-page {
  background: url("http://i.imgur.com/KNYV8j2.jpg") repeat center top #69C9CA;
  border-bottom: 10px solid #FFF;
  line-height: 185px;
  margin-bottom: 100px;
}

Answer 1

你可以添加在身体上添加填充顶部，然后你需要＃top-bar上的顶部0px

将此添加到您的css代码中：

body{
    padding-top: 40px;
}

#top-bar {
    top: 0px;
}

无法在固定div下方获取元素以显示带有填充或边距的完整高度

1 个答案: