文章/答案/技术大牛

发布

社区首页 >问答首页 >前伪类不解决页面标题下内容消失的标准CSS技巧

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

Stack Overflow用户

提问于 2018-08-29 18:29:43

回答 4查看 378关注 0票数 0

我的主样式文件中有下面的CSS代码。我在网上查看过的任何地方都说要使用：：same类将高度和页边距设置为与标头相同。我已经这样做了，但是每当我单击标题中的链接，将用户发送到具有正确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>

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-08-29 20:36:15

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

在您的示例中，我认为可能导致问题的原因是您使用了实际的"title“元素作为锚元素。我建议将一个单独的(不可见的)元素作为锚元素，以确保它不会干扰页面的正常布局，然后根据需要设置"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>

票数 1

Stack Overflow用户

发布于 2018-08-29 18:42:15

尝试将标题位置更改为相对位置和绝对位置，并查看是否将其修复。

票数 0

Stack Overflow用户

发布于 2018-08-29 18:45:38

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52084006

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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