关键词：
【中文标题】在固定标题下方显示内容【英文标题】：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 点，这就解释了为什么我很难理解你的答案。固定导航栏下方的 MUI 应用栏和模糊内容
】固定导航栏下方的MUI应用栏和模糊内容【英文标题】：MUIAppbarandblurcontentbelowfixedNavbar【发布时间】：2021-07-2909:37:21【问题描述】：有没有办法改变我的material-uiAppBar组件的背景属性来模糊固定导航栏的内容？我已经尝试了过滤... 查看详情
在 NSWindow 下方显示内容的最佳方式是啥？
】在NSWindow下方显示内容的最佳方式是啥？【英文标题】：WhatisthebestwaytoshowthecontentbelowtheNSWindow?在NSWindow下方显示内容的最佳方式是什么？【发布时间】：2015-08-1215:41:36【问题描述】：这是UI模型：蓝色背景是屏幕，红色是NSWindow... 查看详情
如何停止正文内容显示在页脚内容及下方
】如何停止正文内容显示在页脚内容及下方【英文标题】：howtostopbodycontentshowingoverfootercontentandbelow【发布时间】：2014-08-1122:30:40【问题描述】：我正在使用自动完成文本框，这里基于动态值超出滚动条，如果超过文本框滚动条... 查看详情
CSS在固定标题下制作垂直滚动区域？
】CSS在固定标题下制作垂直滚动区域？【英文标题】：CSSToMakeVerticalScrollingRegionUnderFixedHeader?【发布时间】：2018-12-0619:41:14【问题描述】：目标：模拟此***页面的固定标题和可滚动内容：随着内容向上滚动，内容下方的页脚会向... 查看详情
iOS7 UIScrollView 在状态栏下方显示偏移内容
】iOS7UIScrollView在状态栏下方显示偏移内容【英文标题】：iOS7UIScrollViewshowoffsetcontentbelowstatusbar【发布时间】：2013-11-0615:59:55【问题描述】：我正在开发我的应用程序以使用iOS7。我有一个UINavigationController我正在推动一个UIViewControl... 查看详情
WKWebView 未在“屏幕下方”显示内容
】WKWebView未在“屏幕下方”显示内容【英文标题】：WKWebViewnotshowingcontent"belowthescreen"【发布时间】：2016-12-0115:13:27【问题描述】：我必须将WKWebView集成到UITableView中（请不要质疑）。我确保WKWebView滚动被禁用，这样我可以... 查看详情
Flutter：如何将小部件放置在容器内的固定居中小部件下方
】Flutter：如何将小部件放置在容器内的固定居中小部件下方【英文标题】：Flutter:HowtoplaceaWidgetbelowfixedCenteredWidgetinsideaContainer【发布时间】：2021-03-2608:27:29【问题描述】：如何将Widget放置在Container内固定的CenteredWidget下方？我正... 查看详情
htmlphilipbenton编写的codepen。向上滚动导航栏显示-导航栏固定在浏览器顶部，隐藏在滚动下方(代码片段)
当您在文本框中键入内容并按提交时，它会永久显示在文本框下方的列表中[关闭]
...交时，它会永久显示在文本框下方的列表中[关闭]【英文标题】：Whenyoutypesomethinginatextboxandpresssubmititappearsinalistbelowthetextboxpermerantly[closed]【发布时间】：2017-09-1215:59:36【问题描述】：我已经尝试了多种选择，但没有任何效果。当... 查看详情
移动应用锚链接跳转到固定标题下方
】移动应用锚链接跳转到固定标题下方【英文标题】：MobileAppAnchorLinksJumpBeneathFixedHeader【发布时间】：2017-08-0505:10:21【问题描述】：我创建了锚链接，以便使用固定标题/固定横幅轻松导航我的一个移动页面；但是，每次我单击... 查看详情
html中想让一部分内容一直显示在页面的最下方，页面内容不足一屏时显示在这一屏的最下方
...足一屏，你就用个绝对定位追问因为页面显示的内容是不固定的，就想某宝，你搜索一个东西，可能会出 查看详情
如何在导航下方的响应式布局中显示 Div/ul/List 但与我的内容重叠？
...的响应式布局中显示Div/ul/List但与我的内容重叠？【英文标题】：HowcanishowtheDiv/ul/Listinaresposivelayoutbelowthenavigationbutoverlayingmycontent?【发布时间】：2021-04-0210:56:13【问题描述】：我正在尝试构建响应式导航。这个想法是构建类似于A... 查看详情
如何在列表视图下方放置固定按钮？
】如何在列表视图下方放置固定按钮？【英文标题】：Howtoplacefixedbuttonbelowlistview?【发布时间】：2012-09-0702:27:30【问题描述】：有没有办法让一个按钮直接位于列表视图下方，这样随着列表视图的增长，按钮会向下移动，但按钮... 查看详情
在固定导航栏下方定位“包装”div？
】在固定导航栏下方定位“包装”div？【英文标题】：Positioninga"wrapper"divunderneathafixednavigationbar?【发布时间】：2013-05-1923:26:17【问题描述】：我已经开始在一个全新的网站上工作，并且一直在玩设计，但是我似乎遇到的... 查看详情
固定位置表头延伸到屏幕外
】固定位置表头延伸到屏幕外【英文标题】：Fixedpositiontableheaderextendsoffthescreen【发布时间】：2018-08-1207:56:57【问题描述】：我有一个带有固定顶部标题、固定左侧边栏和可滚动右侧内容区域的布局。内容包括一个长表，我想在... 查看详情
WPF 在控件下方显示带有验证错误消息的 TextBlock
】WPF在控件下方显示带有验证错误消息的TextBlock【英文标题】：WPFDisplayTextBlockwithvalidationerrormessagebelowcontrol【发布时间】：2011-03-2217:04:39【问题描述】：有没有办法在控件下方的TextBlock中显示错误内容，类似于以下设置Tooltip以... 查看详情
页脚总是在底部不显示：固定
】页脚总是在底部不显示：固定【英文标题】：Footeralwaysontheboottomwithoutdisplay:fixed【发布时间】：2015-11-1411:27:09【问题描述】：我想让我的页脚始终显示在页面底部，即使内容没有填满页面，但是当内容填满页面时，我希望它仅... 查看详情
教你如何在proteldxp中显示标题栏内容
...题栏怎么改PROTEL图中的标题栏是用英文写的,而且格式是固定的,我想改一下格式,把英文换成中文的.请问各位高手该怎么改?回复1PROTEL原理图中的标题栏怎么改701708protel99se安装盘中有个guobiaotemplate.ddb的文件,在design中template中settemp... 查看详情