當我調整 window 的大小時，如何防止 header 向下移動

Question

當我將屏幕的右側一直拖到左側時，header 菜單（class="header-links"）會向下移動一點。 如何阻止它向下移動？ 此外，當我將屏幕從底部拖到頂部時，頁腳 (class="footer-side-links") 不會留在屏幕內。 換句話說，當我將屏幕從底部拖到頂部時，我希望頁腳仍然可見。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" type="text/css" href="portfolio.css">
  <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lexend+Zetta&display=swap" rel="stylesheet">
  <script src="https://use.fontawesome.com/82c7176f2a.js"></script>
</head>
<body>

  <div class="profile">
    <img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile picture">
    <figcaption class="name">JOHN <span>JOHNSON</span></figcaption>
  </div>
  <div class="header-background">
  </div>
  <div class="wrapper">
  <hr>

    <header>
      <nav class="header-links">
        <a href="#Home">Home</a>
        <a href="#About">About</a>
        <a href="#Projects">Projects</a>
        <a href="#Contact">Contact</a>
      </nav>
    </header>
    <footer>
      <nav class="footer-side-links">
        <a href="#link" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        <a href="#link" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        <a href="#link" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
      </nav>
    </footer>
  </div>
</body>
</head>

</html>

CSS

.profile-image {
  width: 200px;
  height: 200px;
  position: relative;
  left: 750px;
  top: 300px;
  border: 7px solid #A9A9A9;
  border-radius: 200px;
  transition: transform 1s;
}

.profile-image:hover {
  transform: rotate(360deg);
  transition: transform 1s;
}

.name span {
  color: orange;
  position: relative;
}

.name {
  position: relative;
  left: 550px;
  top: 330px;
  font-size: 50px;
  color: white;
  font-family: 'Lexend Zetta', sans-serif;
}


.header-background {
  background-color: #000033;
  height: 500rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 18rem;
  position: fixed; /* this was added so when we scroll to right, it wont move */
}

hr {
  color: #3d3d5c;
  left: 0;
  position: fixed;
  top: 6rem;
  width: 17.9rem;
}

.header-links a {
  color: #cccfc2;
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 1.2rem;
  padding: 1.5rem;
  position: relative;
  left: 1rem;
  bottom: 4rem;
  text-decoration: none;
  text-transform: uppercase;
}

.header-links {
  position: fixed;

}

.header-links a:hover {
  color: orange;
}

.footer-side-links a {
  color: white;
  padding: 0.3rem;
}

.footer-side-links a:hover {
  color: orange
}

.footer-side-links {
  left: 3rem;
  position: fixed;
  top: 50rem;
  margin-left:
}

Answer 1

嘗試使用視口單位，如vw或vh而不是px或rem ，它將幫助您使您的網頁/網站具有響應性，也可能解決您的問題。

當我調整 window 的大小時，如何防止 header 向下移動

問題描述

1 個解決方案

解決方案1
0 2020-07-17 20:29:08

當我調整 window 的大小時，如何防止 header 向下移動

問題描述

1 個解決方案

解決方案1 0 2020-07-17 20:29:08

解決方案1
0 2020-07-17 20:29:08