將位置設置為固定時，導航欄會縮小

Question

我目前遇到一個問題，當我將導航欄和橫幅設置為固定位置時，它們會縮小。我有很多事情，例如更改z-index，將其最高位置設置為0，添加自動頁邊距等，但都無濟於事。希望有人可以指出我的錯誤。這是我的html代碼：

 html, body { margin: 0; background-color: #ffeecc; font-family: 'Chivo', sans-serif; } .container { margin: auto; width: 75%; } .nav_left { width: 100%; background-color: #258e25; height: 50px; float: left; text-align: left; } .banner { width: 100%; overflow: hidden; background-color: white; } .banner img { width: 70%; height: 150px; padding: 0 15%; } .top { position: fixed; } nav { text-align: center; } nav ul { list-style-type: none; padding: 0; margin: 0; display: inline-block; width: 100%; height: 100%; } nav ul li { float: left; text-align: center; height: 100%; width: 25%; } nav ul li a { display: inline-block; width: 100%; font-weight: bold; line-height: 50px; text-decoration: none; color: white; } nav ul li a:hover { background-color: white; color: black; } 

 <div class="container"> <div class="top"> <div class="banner"> <img src="images/winwin-logo-cover.jpg" alt="winwin logo"> </div> <nav> <div class="nav_left"> <ul> <li><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li> <li><a href="o_nama.php">O NAMA</a></li> <li><a href="kontakt.php">KONTAKT</a></li> </ul> </div> <div class="nav_right"></div> </nav> </div> 

這就是它的樣子

這就是我放.top{position:fixed}時的樣子

Answer 1

將元素設置為absolute或fixed位置時，該元素將超出正常的內容流，並觸發“ 縮小以適合”功能。 您可以將偏移量和寬度/高度應用於位置並重新創建所需的框尺寸。

.top {
  position: fixed;
  left: 0;      /* ADDED */
  top: 0;       /* ADDED */
  width: 100%;  /* ADDED */
}

 html, body { margin: 0; background-color: #ffeecc; font-family: 'Chivo', sans-serif; } .container { margin: auto; width: 75%; } .nav_left { width: 100%; background-color: #258e25; height: 50px; float: left; text-align: left; } .banner { width: 100%; overflow: hidden; background-color: white; } .banner img { width: 70%; height: 150px; padding: 0 15%; } .top { position: fixed; left: 0; top: 0; width: 100%; } nav { text-align: center; } nav ul { list-style-type: none; padding: 0; margin: 0; display: inline-block; width: 100%; height: 100%; } nav ul li { float: left; text-align: center; height: 100%; width: 25%; } nav ul li a { display: inline-block; width: 100%; font-weight: bold; line-height: 50px; text-decoration: none; color: white; } nav ul li a:hover { background-color: white; color: black; } 

 <div class="container"> <div class="top"> <div class="banner"> <img src="images/winwin-logo-cover.jpg" alt="winwin logo"> </div> <nav> <div class="nav_left"> <ul> <li><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li> <li><a href="o_nama.php">O NAMA</a></li> <li><a href="kontakt.php">KONTAKT</a></li> </ul> </div> <div class="nav_right"></div> </nav> </div> 

Answer 2

因為.top沒有寬度。 但是，當設置為fixed它將使用視口寬度來計算寬度。 您可能希望將其設置為75% 。

您還可能需要設置.container到position: relative所以.top將涉及到它的邊界。

 body { margin: 0; background-color: #ffeecc; font-family: 'Chivo', sans-serif; } .container { margin: auto; width: 75%; position: relative; } .top { position: fixed; width: 75%; } .nav_left { width: 100%; background-color: #258e25; height: 50px; float: left; text-align: left; } nav { text-align: center; } nav ul { list-style-type: none; padding: 0; margin: 0; display: inline-block; width: 100%; height: 100%; } nav ul li { float: left; text-align: center; height: 100%; width: 25%; } nav ul li a { display: inline-block; width: 100%; font-weight: bold; line-height: 50px; text-decoration: none; color: white; } nav ul li a:hover { background-color: white; color: black; } 

 <div class="container"> <div class="top"> <nav> <div class="nav_left"> <ul> <li><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li> <li><a href="o_nama.php">O NAMA</a></li> <li><a href="kontakt.php">KONTAKT</a></li> </ul> </div> <div class="nav_right"></div> </nav> </div>