Question

当我第一次进入我的网站时，首页看起来不错，但是当我从网站的其他页面按回首页时，页面顶部比预期的要低一些，您必须向上滚动一点点达到最高。为什么会这样呢？它与我的样式有关吗？

CSS：

.background-img {
  background: url(./images/rocks.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: white;
  width: 100%;
  height: 620px;
  margin-top: -24px;
  margin-left: -8px;
  padding-right: 16px;
}

 h1 {
   color: white;
   font-family: 'Great Vibes', cursive;
   margin-left: 30px;
   font-size: 45px;
  text-align: left;
   margin-top: -57px;
 }

/* Transparent Subnavigation Bar */

 .navbar {
 overflow: hidden;
 background: rgba(0, 0, 0, 0.2);
 font-family: 'Hind', sans-serif;
 margin-top: 24px;
 margin-right: -16px;
 height: 4.3rem;

 background-color: inherit;
 font-family: 'Hind', sans-serif;
 line-height: 44px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
 display: none;
 position: absolute;
 background: rgba(50, 53, 44, 0.3);
 /* background: rgb(82, 109, 139); */
 font-family: 'Hind', sans-serif;
 min-width: 160px;
 z-index: 1;
}
 #page-container {
   position: relative;
   min-height: 100vh;
 }

/* Footer */
 #footer {
   position: relative;
   bottom: 0;
   background-color: black;
   color: white;
   width: 100%;
   height: 5.5rem;        
   margin-left: -8px;
   padding-right: 16px;
   bottom: -8px;
  }

  .footer-text {
    padding-left: 20px;
    padding-top: 10px;
  }

HTML

 <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
        <script src="/scripts/retreat.js"></script>
    </head>
    <body>
            <div class="page-container">
            <div class="background-img">
        <div class="navbar">
            <button class="btn">
                    <a id="btn-text" href="./contact.html">Book Now</a></button>
        <a href="./contact.html">Contact</a>
            <div class="dropdown">
                    <button class="dropbtn">Retreat
                        <i class="fa fa-caret-down"></i>
                            </button>

                <div class="dropdown-content">
                <a href="Retreat-Dropdown/moringaMethod.html">The Moringa Method</a>
                    <a href="Retreat-Dropdown/location.html">Location</a>
                    <a href="Retreat-Dropdown/programme.html">Programme</a>
                    <a href="Retreat-Dropdown/accomodation-prices.html">Accomodation/Prices</a>
            </div>
    </div>
    <a href="testimonials.html">Testimonials</a>
    <a href="about.html">About</a>
    <a href="home.html">Home</a>
</div>
            <h1> Moringa Wellness Retreat</h1>
        </nav>
    </div>

从其他页面导航到主页时，主页会稍微向下移动

0 个答案: