gpt4 book ai didi

html - 如何使用固定位置覆盖整个屏幕宽度?

转载 作者:行者123 更新时间:2023-12-05 03:28:28 25 4
gpt4 key购买 nike

我正在使用 position: fixed 将网站名称固定在页面顶部,但是这样做 div 边界会在 div 中的文本完成后立即完成。它没有覆盖整个屏幕长度:

<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed;">
<div style="background-color: bisque; margin-top: 0%; font-family: Copperplate, Papyrus, fantasy; color: black; text-align: center;">
&nbsp;
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1> &nbsp;
</div>
</nav>

这是 Fixed 的工作方式: This is how it's working with Fixed:

这就是我希望它固定在顶部的方式: This is how I want it to get fixed at the top

最佳答案

使用100vw

nav{
width = 100vw;
}

body{
height: 200vh;
background-image: linear-gradient(red, yellow);
}

nav {
position: fixed;
top:0;
left:0;
width:100vw;
/* extra */
height: 50px;
background: red;
margin-bottom: 0%;
}

.nagi{
background-color: bisque;
font-family: Copperplate, Papyrus, fantasy;
color: black;
text-align: center;
}
<body>
<nav>
<div class="nagi">
&nbsp;
<h1>
<a href="#">Ratnesh Nagi</a>
</h1> &nbsp;
</div>
</nav>
</body>

关于html - 如何使用固定位置覆盖整个屏幕宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71257565/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com