[英]Navigation bar shrinks when position is set to fixed
I am currently having an issue where my navigation bar and banner shrink when I set their position to fixed.I have many things like changing z-index,setting its top position to 0,adding auto margin etc, and none of it worked.I hope someone can point me to my mistake.This is my html code: 我目前遇到一个问题,当我将导航栏和横幅设置为固定位置时,它们会缩小。我有很多事情,例如更改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>
this is how it should look like 这就是它的样子
this is how it looks like when i put .top{position:fixed}
这就是我放.top{position:fixed}
时的样子
When you set an element to absolute
or fixed
position, it will be out of the the normal content flow and trigger the shrink to fit feature. 将元素设置为absolute
或fixed
位置时,该元素将超出正常的内容流,并触发“ 缩小以适合”功能。 You can apply the offsets and width/height to position and recreate the box size you wish to have. 您可以将偏移量和宽度/高度应用于位置并重新创建所需的框尺寸。
.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>
Because .top
has no width. 因为.top
没有宽度。 However, when set to fixed
it is using the viewport width to calculate the width. 但是,当设置为fixed
它将使用视口宽度来计算宽度。 You might want to set it to 75%
. 您可能希望将其设置为75%
。
You also might want to set .container
to position: relative
so .top
will relate to its borders. 您还可能需要设置.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.