Question

我正在尝试为我正在制作的网站设置固定标头，并且内容位于标题下方。我希望将内容绘制在标题下，而无需用户向上滚动。如果可能的话，我希望用户不要在内容上方看到任何空格。

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Elemental Fury</title>
        <meta charset="utf-8" name="discription" content="Best game evar!!">
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <link href="main.css" type="text/css" rel="stylesheet">
        <script src="script.js"></script>
    </head>
    <body>
        <center>
            <nav>
                <table class="navTable">
                    <tr>
                        <td align="center" class="navItem"><a href="#Fire"><img class="navImage" src="Images/Fire.jpg" alt="Fire"></a></td>
                        <td align="center" class="navItem"><a href="#Air"><img class="navImage" src="Images/Air.jpg" alt="Air"></a></td>
                        <td align="center" class="navItem"><a href="#Earth"><img class="navImage" src="Images/Earth.jpg" alt="Earth"></a></td>
                        <td align="center" class="navItem"><a href="#Water"><img class="navImage" src="Images/Water.jpg" alt="Water"></a></td>
                    </tr>
                </table>
            </nav>
            <section>
                <h1 class="title">Fancy logo</h1>
                <div id="Fire" class="Page">
                    <h1>Fire</h1>
                    <img src="Images/archer%20fire.jpg"/>
                    <img src="Images/mage%20fire.jpg"/>
                    <img src="Images/soldier%20fire.jpg" />
                </div>
                <div id="Water" class="Page">
                    <h1>Water</h1>
                    <img src="Images/archer%20water.jpg"/>
                    <img src="Images/mage%20water.jpg"/>
                    <img src="Images/soldier%20water.jpg"/>
                </div>
                <div id="Air" class="Page">
                    <h1>Air</h1>
                    <img src="Images/archer%20air.jpg"/>
                    <img src="Images/mage%20air.jpg"/>
                    <img src="Images/soldier%20air.jpg"/>
                </div>
                <div id="Earth" class="Page">
                    <h1>Earth</h1>
                    <img src="Images/archer%20earth.jpg"/>
                    <img src="Images/mage%20earth.jpg"/>
                    <img src="Images/soldier%20earth.jpg"/>
                </div>
            </section>
            <footer>
                <a href="#Rules">Rules</a>
            </footer>
        </center>
    </body>
</html>

和css

    nav{
    height: 106px;
    width: 100%;
    background-color: #ddd;
    padding: 0px;
    border: 0px;
    top: 0px;
    left: 0px;
    box-shadow: 6px 6px 5px #d0d0d0;
    position: fixed;
    z-index: 2;
}
.navItem{
    width: 2%;
}
.navImage{
    height: 100px;
    width: 100px;
}
.navImage:hover{
    box-shadow: 10px 5px 5px #888888;
}
.Page{
    display: none;
    position: absolute;
    top: 400px;
}
section{
    margin-top: 400px;
}
.Page:target{
    display: block;
    position: relative;
    top: 40px;
}

我在本地保存的图像因此我不得不用换行符代替。只需点击页面顶部的其中一个导航链接，它就会成为一个问题。

Answer 1

为每个锚定的div添加等于标题高度的填充。

对于你的例子：

.Page { padding-top:106px; }

Fiddle

固定标题重叠

1 个答案: