在固定标头以下显示内容

Question

我的页面有一个固定的标题，我知道这会导致内容流从页面的顶部开始。我一直在寻找解决这一问题的方法，但似乎没有什么效果，例如这一个

下面是代码，这里是一个码页 -正如您可以看到的，我的article中的内容显示在页面的顶部，尽管它位于html的底部。

，我希望有一个解释的解决办法，这样我就可以学习.

UPDATE -添加padding-top:{500px}成功地解决了此问题。这是推荐的解决办法吗？我意识到了这个修复这里。

谢谢你们！

​

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.col-1 {
  width: 100%;
}

.inline-block-container>* {
  display: -moz-inline-stack;
  display: inline-block;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.wrapper {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  z-index: 99;
}

.header {
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.header .logo a img {
  width: 150px;
  height: 49px;
}

.logo {
  margin-left: 40px;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

.site-content {
  margin-top: 100px;
}

.banner-home {
  background: url("");
  height: 100vh;
  width: 100%;
  background-size: cover;
  position: absolute;
  z-index: -1000;
}

#intro {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #020000;
  z-index: 50;
}

#intro a {
  border: 3px solid #020000;
  cursor: pointer;
}

#intro li a {
  padding: 20px;
  color: #020000;
  font-weight: 800;
}

#intro li a:hover {
  background-color: #ffd800;
}

<div id="page" class="rare-site">
  <div class="wrapper">
    <div id="global-navigation">
      <!-- Global Header -->
      <header class="header">
        <div class="logo">
          <a href="">
            <!--<img src="images/rare-logo.png">-->
            <h1>Rare Select</h1>
          </a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="">HOME</a></li>
            <!-- 
          -->
            <li>
              <div class="flexbox-container">
                <a href="">INFO</a>

            </li>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">NEWSLETTER</a>
              </div>
              <!--
          -->
              <li>
                <div class="flexbox-container">
                  <a href="">CONTACT</a>
              </li>
              <!--
          -->
          </ul>
      </header>
      </div>
      </div>
      <div id="content" class="site-content">
        <div id="primary" class="content-area">
          <!-- Content Area -->
          <main id="main" class="site-main" role="main">
            <div class="banner large-trunk">
              <div class="banner-home"></div>
              <div class="banner-overlay">
                <div id="intro">
                  <h2 class="discover"><u>The easy way to discover models.</u></h2>
                  <div id="button-container">
                    <div id="button-overlay">
                      <ul class="inline-block-container">
                        <li><a class="discover-1">I'm looking to become a model</a></li>
                        <li><a class="discover-2">I'm looking for a model</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <article id="newsletter">
              <div class="newsletter-entry">
                <section class="news-content trunk">
                  <div class="feature-box">
                    <h2>Recent News</h2>
                  </div>
                </section>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>

​

Answer 1

您已经有了一个100 is头和一个margin-top应用于site-content，用于后面的内容，就像通常所做的那样。

1. 一个position: fixed头将从流中取出。因此，它后面的DOM元素将重叠。
2. 给出周围内容的z-index更高的值，使其位于最上面(您已经给了wrapper一个z-index: 99)。
3. 它后面的内容被赋予一个margin-top值。如果标头的height是固定的(如这里所示)，则使用CSS给它，如果标头的高度是动态的，您可能必须选择javascript来动态地设置height。

因此，使用#global-navigation和.header限制height: 100%的高度，并将display: flex添加到导航ul中。另外，移除横幅的绝对定位，并将背景图像应用于site-content-参见下面的演示：

​

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.col-1 {
  width: 100%;
}

.inline-block-container>* {
  display: -moz-inline-stack;
  display: inline-block;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.wrapper {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  z-index: 99;
}

#global-navigation { /* ADDED */
  height: 100%;
}

.header {
  height: 100%; /* ADDED */
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.header .logo a img {
  width: 150px;
  height: 49px;
}

.site-content { /* ADDED */
  background: url("http://placehold.it/50x50");
  height: 100vh;
  width: 100%;
  background-size: cover;
}

.logo {
  margin-left: 40px;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  display: flex; /* ADDED */
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

.site-content {
  margin-top: 100px;
}

.banner-home {} /* removed absolute positioning */

#intro { /* removed absolute positioning */
  width: 100%;
  text-align: center;
  color: #020000;
  z-index: 50;
}

#intro a {
  border: 3px solid #020000;
  cursor: pointer;
}

#intro li a {
  padding: 20px;
  color: #020000;
  font-weight: 800;
}

#intro li a:hover {
  background-color: #ffd800;
}

<div id="page" class="rare-site">
  <div class="wrapper">
    <div id="global-navigation">
      <!-- Global Header -->
      <header class="header">
        <div class="logo">
          <a href="">
            <!--<img src="images/rare-logo.png">-->
            <h1>Rare Select</h1>
          </a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="">HOME</a></li>
            <!-- 
          -->
            <li>
              <div class="flexbox-container">
                <a href="">INFO</a>
              </div>
            </li>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">NEWSLETTER</a>
              </div>
              <!--
          -->
              <li>
                <div class="flexbox-container">
                  <a href="">CONTACT</a>
                </div>
              </li>
              <!--
          -->
          </ul>
          </nav>
      </header>
      </div>
      </div>
      <div id="content" class="site-content">
        <div id="primary" class="content-area">
          <!-- Content Area -->
          <main id="main" class="site-main" role="main">
            <div class="banner large-trunk">
              <div class="banner-home"></div>
              <div class="banner-overlay">
                <div id="intro">
                  <h2 class="discover"><u>The easy way to discover models.</u></h2>
                  <div id="button-container">
                    <div id="button-overlay">
                      <ul class="inline-block-container">
                        <li><a class="discover-1">I'm looking to become a model</a></li>
                        <li><a class="discover-2">I'm looking for a model</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <article id="newsletter">
              <div class="newsletter-entry">
                <section class="news-content trunk">
                  <div class="feature-box">
                    <h2>Recent News</h2>
                  </div>
                </section>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>

​