Html 将标题图像连接到导航栏

所以我把导航条放在上面，让其他的东西都溢出来了。我想我的标题图像连接到它下面，但不跟随导航栏滚动时，只是停留在那里。下面是一张图片，显示我正在处理的问题：

我想消除导航栏和标题之间的空间

这是我的css：

.wrapper {
    width: 100%;
    overflow: hidden;

}
.container {
    width: 100%;
    margin: 0 auto;
}
.banner-img {
    width: 100%;
}

这是我的HTML：

  <div id="wrapper">
    <div id="container">
        <a><img class="banner-img" src="images/banner.png"/>
    </div>
  </div>

HTML:

---

问题似乎是你身上的垫子。您的导航高度小于70px，因此

padding top:70px

会在图像和导航栏之间显示一个空格

为了解决这个问题，您必须将padding top值设置为导航条的精确高度。您还需要确保导航栏始终具有相同的高度，或者如果导航栏高度发生变化，则填充顶部值也会发生变化

在我的浏览器上，导航栏的高度为51px，因此您的身体css如下所示：

body {
    height: 100%;
    margin: 0 0 100px;
    padding-top: 51px;
    background-color: lightblue;
}

你可以这样修理

有两种方法可以解决你的问题

将横幅图像代码放入导航条形码中

...

navbar先生{ 位置：固定；顶部：0； }

只需将图像位置设置为固定和顶部：（导航栏高度）px

---

好吧，这很有道理。谢谢你的详细回答！

  <ul class="nav">
    <li class="nav"><a class ="active" href="default.asp">Home</a></li>
    <li class="nav"><a href="news.asp">News</a></li>
    <li class="nav"><a href="contact.asp">Contact</a></li>
    <ul class="nav-right">
        <li class="nav"><a href="about.asp">About</a></li>
    </ul>
  </ul>

html {
    position: relative;
    min-height: 100%;
}

body {
    height: 100%;
    margin: 0 0 100px;
    padding-top: 70px;
    background-color: lightblue;
}

body {
    height: 100%;
    margin: 0 0 100px;
    padding-top: 51px;
    background-color: lightblue;
}