在固定标题下方显示内容

Posted 2023-03-05

【中文标题】在固定标题下方显示内容

【英文标题】：Displaying content below a fixed header

【发布时间】：2018-03-15 07:13:34

【问题描述】：

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

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

我希望有一个解释的解决方法，以便我可以学习。

更新 - 添加padding-top:500px 成功解决了这个问题。这是推荐的解决方法吗？我被告知此修复程序here。

谢谢大家！

*,
*: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>

【问题讨论】：

由于margin-top: 100px 已经在您的代码示例中按预期工作，并且也是解决您所问问题的最常用方法，它怎么不适合您？

对不起，我没有清楚地理解你的问题。 margin-top: 100px 工作于固定标题之后的第一部分内容，我的问题是关于此部分之后的任何内容

我明白了，我误解了这个问题，所以一切都很好。

【参考方案1】：

您已经有一个 100 像素的标题和一个 margin-top 应用于 site-content 以用于其后面的内容，就像通常所做的那样。

position: fixed 标头将从流中取出。所以它后面的DOM元素会重叠。

z-index 比周围的内容更高，因此它位于顶部（你已经完成了给 wrapper 一个 z-index: 99）

它后面的内容被赋予margin-top 值。如果标题的height 是固定的（就像这里的情况一样），您可以使用CSS 给它，如果标题的高度是动态的，您可能必须选择javascript 来动态设置height。

因此，使用height: 100% 限制#global-navigation 和.header 的高度，并将display: flex 添加到导航ul。同时删除 banner 的 绝对定位 并将背景图片应用到 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>

【讨论】：

不幸的是，这并没有起到作用，但是body:padding-top:200px; 正在移动下面的article 内容，尽管我不确定这是否实用。

请注意#intro 是absolute 位置...你为什么有它？这就是为什么banner 出现在上面（正如它的翻译）和article 上升......

因为#intro 包含两个覆盖背景图像的按钮。我在这个问题中包含了代码的基本内容

好吧，所以我很困惑...所以请您查看上面的 sn-p（我已在 banner-home 添加了演示背景）并解释问题吗？跨度>

嘿，非常感谢，这非常有效，当我问这个问题时是凌晨 3 点，这就解释了为什么我很难理解你的答案。