Question

我有一个页面，顶部有一个固定的位置标题，页面内的链接到id属性指定的部分。当我链接到其中一个时，它会将该部分放在页面顶部，以便它的第一部分与标题重叠。

如何让该部分为标题留出空间？我不想在部分ID和部分内容之间添加100px的边距，因为这会在页面上留下太多的空白。

CSS：

#header {
    position: fixed;
    top: 0;
    height: 100px;
    left: 0;
    right: 0;

    background: #464646;
}

#content {
    margin-top: 100px;
}

HTML：

<div id = "header"> <!-- header contents --> </div>

<div id = "content">
    <a href = "#section"> Section </a>

    <!-- Content here, so that page has to scroll to reach section -->

    <h1 id = "section"> Section </h1>

    <!-- More content -->
</div>

Answer 1

艾玛。我刚刚为你的案例创建了一个fiddle。您可以为id属性指定的部分设置负边距和正填充。希望，我的回答对你有所帮助。

Answer 2

您可以尝试使用此代码...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>A simple Input Form</title>

<style type="text/css">
body {
padding: 0;
margin: 0;
}
.nav {position:absolute; top:0px; left:0px; height:50px; right:0px;overflow:hidden;
color: #ffffff;
text-align: center;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);}
.nav ul{list-style:none;}
.nav ul li{display:inline-block;}
.nav ul li a{color:#fff; font-size:26px;}
#faq{position:absolute; top:50px; bottom:50px; left:0px; right:0px; overflow:hidden;}
</style>


</head>
<body>
<header>
   <div class="nav" style="clear:both;">
   <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">four</a></li>
   </ul>
   </div>
   </header>  
   <section id="faq">
   <h1 id="one">This is faq one</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="two">This is faq two</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="three">This is faq three</h1>
  <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>

   <h1 id="four">This is faq four</h1>
   <p>some text</p>
   <p>some text</p>
   <p>some text</p><p>some text</p>
   <p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p><p>some text</p>
   </section>

</body>
</html>

HTML - 没有页面跳转到顶部的锚点链接

2 个答案: