伪类之前的标准CSS技巧，不解决页面标题下消失的内容

我的主样式文件中有以下CSS代码。我在网上看到的任何地方都说使用：：before 伪类来设置高度，并将 - 边距设置为与标题相同。我已经这样做了，但是每当我单击标题中的链接，将用户发送到具有正确ID的部分div时，内容仍然显示在标题后面。请帮忙，因为这是最令人沮丧的！

header {
height: 50px;
width: 100%;
position: fixed;
top: 0px;
margin: 0px;
padding: 0px 20px;
overflow: hidden;
background-color: #636;
background-image: linear-gradient(top, #636 0%, #303 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #636), color-stop(1, #303));
background-image: -moz-linear-gradient(center top, #636 0%, #303 100%);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-align: right;
z-index: 400;
}
content {
height: auto;
width: 100%;
position: relative;
top: 340px;
margin: 0px auto;
overflow: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-align: left;
}
section {
height: auto;
width: auto;
position: relative;
margin: 40px 20px 0px 20px;
padding: 5px 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
section::before {
content: "";
display: block;
height: 50px;
margin: -50px 0 0;
visibility: hidden; 
}
section-content {
display: block;
height: auto;
width: auto;
margin: 0px 20px;
position: relative;
padding: 0px;
text-align: left;
}
footer {
height: 30px;
width: 100%;
position: fixed;
bottom: 0px;
margin: 0px;
padding: 5px 20px 5px 20px;
overflow: hidden;
background-color: #636;
background-image: linear-gradient(top, #303 0%, #636 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #303), color-stop(1, #636));
background-image: -moz-linear-gradient(center top, #303 0%, #636 100%);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-align: center;
color: #e4ebfd;
z-index: 400;
}

.HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="css/links.css" />
<link rel="stylesheet" type="text/css" href="css/particles.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/team.css" />
<link rel="stylesheet" type="text/css" href="css/ticker.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/xhr.js"></script>
<script type="text/javascript" src="js/particles-config.js" defer="defer"></script>
</head>
<body>
<a name="#top" />
<header>
<a href="#about" class="nav">About</a>
<a href="#roadmap" class="nav">Roadmap</a>
</header>
<ticker-wrapper>
<ticker>
<ticker-item>
Current Era: 0
</ticker-item>
<ticker-item>
Block Height: <script>document.getElementById('BLOCK_HEIGHT').innerHTML = coinData.BLOCK_HEIGHT</script>
</ticker-item>
<ticker-item>
Total EGEM Supply: <script>document.getElementById('TOTAL_EGEM_SUPPLY').innerHTML = coinData.TOTAL_EGEM_SUPPLY</script>
</ticker-item>
<ticker-item>
Market Cap (USD): $<script>document.getElementById('MARKET_CAP_USD').innerHTML = coinData.MARKET_CAP_USD</script>
</ticker-item>
<ticker-item>
Average Exchange Price (USD): $<script>document.getElementById('AVERAGEUSD').innerHTML = coinData.AVERAGEUSD</script>
</ticker-item>
</ticker>
</ticker-wrapper>
<social class="social-media">
<a href="http://discord.egem.io" alt="Discord" target="_blank"><img src="images/social-icons/discord-32.png" alt="Discord" class="social-anim" /></a>
<!--<img src="images/social-icons/facebook-32.png"  alt="Facebook" class="social-anim" />-->
<a href="https://t.me/EGEM_Team" alt="Telegram" target="_blank"><img src="images/social-icons/telegram-32.png" alt="Telegram" class="social-anim" /></a>
<a href="https://twitter.com/EtherGemCoin" alt="Twitter" target="_blank"><img src="images/social-icons/twitter-32.png" alt="Twitter" class="social-anim" /></a>
<a href="https://www.youtube.com/channel/UCH4uEyf5roU6ydButXYdiBg" alt="YouTube" target="_blank"><img src="images/social-icons/youtube-32.png" alt="YouTube" class="social-anim" /></a>
</social>
<particles-wrapper>
<div id="particles-js"></div>
</particles-wrapper>
<intro>
<img src="images/logo.png" style="display: none; margin-top: 20px;" class="egem-logo" alt="EtherGem Logo" />
</intro>
<content>
<section id="about">
About EGEM
<arrow class="scrollTop">
&#9650;
</arrow>
</section>
<section-content>
<p>
EGEM is the stable, pure, no pre-mine coin with applied technologies peernet and per block endowment.
</p>
<p>
What does that really mean, though?
</p>
<p>
EtherGem, "EGEM," is first and foremost, a pure community coin with no pre-mine. True to its roots as a cryptocurrency, the Proof of Work mining
community will always be a part of EGEM's future and is the foundation of the EGEM launch. There is no ICO on EGEM and EGEM is its own primary
blockchain, not just a token or concept on another chain. The EtherGem blockchain is an Ethereum network, meaning it starts with the tested and proven
Ethereum (as in ETH) core technologies and builds from there. Technically, EGEM is an Ethereum chain as described in the yellow paper, with EIP150,
EIP155, EIP158 applied from block 0. Block Rewards have 7 eras of reduction, including a dev reward enabled after block 5000. Developers and Community
Managers are bound by a continuity agreement to maintain the network, community, and coin. There is no cap to EGEM at the moment. A monetary cap will be
put in place when the community determines that the logical progression would be to cap the coin.
</p>
<p>
An "applied technologies peernet" is where the EtherGem blockchain grows on a mineable token sidechain. Dual mining ethergem and a token is something
new. The EGEM sidechain is designed to be very much an integral part of ongoing mainchain development, where peers can implement new technology
while continuing to rely on a solid foundation. The sidechain and token will be available shortly after the mainnet release.
</p>
<p>
View the EtherGem <a href="https://egem.io/roadmap.html" target="_new">white paper</a>.
</p>
</section-content>
<section id="roadmap">
Project Roadmap
<arrow class="scrollTop">
&#9650;
</arrow>
</section>
<section-content class="aligncenter">
<img src="images/roadmap.png" style="height: auto; width: 100%" />
</section-content>
</content>
<footer>
&copy;2018 The EtherGem Project, All Rights Reserved.
</footer>
</body>
</html>

我不熟悉使用::before来解决这个问题，但您可以使用高度和负边距。

我认为在您的示例中可能导致问题的是您使用实际的"title"元素作为锚元素。我建议将一个单独的(不可见的(元素作为锚元素，以确保它不会干扰页面的正常布局，然后根据需要设置"标题"元素的样式：

/* important styles */
#demo {
padding-top: 50px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 2;
}
.section-anchor {
margin-top: -50px;
height: 50px;
display: block;
visibility: hidden;
}
/* styles for demo */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background: rgba(0, 0, 0, 0.3);
padding: 10px;
}
header a {
color: #fff;
}
.section {
position: relative;
z-index: 1;
}
.title {
padding: 10px;
font-size: larger;
font-weight: bold;
background: rgba(200,0,0,0.3);
background-image: repeating-linear-gradient(-45deg, #dff, #dff 10px, #eee 10px, #eee 20px);
opacity: 0.5;
}
p {
height: 500px;
border: 10px solid #bbb;
background-image: repeating-linear-gradient(45deg, #ddd, #ddd 30px, #eee 30px, #eee 60px);
opacity: 0.3;
}

<div id="demo">
<header>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</header>
<div class="section">
<a class="section-anchor" name="section1"></a>
<div class="title">Section 1</div>
<p>Text...</p>
</div>
<div class="section">
<a class="section-anchor" name="section2">-</a>
<div class="title">Section 2</div>
<p>Text...</p>
</div>
<div class="section">
<a class="section-anchor" name="section3"></a>
<div class="title">Section 3</div>
<p>Text...</p>
</div>
</div>

尝试添加body{ padding-top: 50px; }

您应该将标题下方的所有内容包装在main部分中，并将其稍微移到底部。

以下 CSS 应该会有所帮助：

main {
top: 2em; /* Modify to suit your needs */
}

问题：由于您将标题的位置标记为固定，因此将其从正常的元素流中移除，因此标题之外的所有内容都会正常填充页面，标题覆盖所有内容。为避免这种情况，您应该将其他所有内容进一步替换。

尝试将标题位置更改为相对和绝对位置，看看是否有任何一种修复了它。

相关内容

最新更新

热门标签：