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

Question

我正在使用 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>

这是固定的工作方式：

这就是我希望它固定在顶部的方式：

Answer 1

使用 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>

Answer 2

您可以使用 flex 来替代一些其他创意 CSS

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar {
  /* force this to full width*/
  align-self: stretch;
  margin-bottom: 1rem;
}

.navbar-content {
  text-align: center;
  background-color: bisque;
  font-family: Copperplate, Papyrus, fantasy;
  color: black;
  /* make it have a size without the &nbsp;*/
  border: 1px solid transparent;
}

.navbar-brand {
  text-decoration: none;
}

.new-thing {
  background-color: #bbdddd;
  /* force this to full width just for fun */
  align-self: stretch;
}

<div class="container">
  <nav class="navbar navbar-light bg-light">
    <div class="navbar-content">
      <h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
    </div>
  </nav>
  <div class="new-thing">I am next in line</div>
</div>

Answer 3

将 `right` 和 `left` 属性设置为零。

您可以使用 right 和 left 属性指定 positioned 元素的水平位置。请参阅下面的代码段：

<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed; right: 0; left:0;">
  <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>

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

How to use position fixed to cover the full screen width?

html

css

css-position

将 `right` 和 `left` 属性设置为零。

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

How to use position fixed to cover the full screen width?

html

css

css-position

将 right 和 left 属性 设置为零。

将 `right` 和 `left` 属性设置为零。