固定 div 仅在一页上不占全宽度答案

【问题标题】：fixed div not taking full width on one page only固定 div 仅在一页上不占全宽度
【发布时间】：2019-04-30 21:21:08
【问题描述】：

更新：页面 URL 是 https://nuclearterrortoday.org/test/pledge.php - 如果您在移动设备上检查，您会注意到导航栏没有占据页面的整个宽度，尽管检查员说宽度是 100vw

样式表（按层叠顺序 - 某些元素可能会在 forms.css 中被覆盖）：

https://nuclearterrortoday.org/test/style.css

https://nuclearterrortoday.org/test/forms.css

我有一个网站，其中包含整个网站的标准导航栏。在一页上，导航栏只覆盖了大约 90% 的屏幕宽度，在右侧留下了一个空隙。有一个额外的样式表对受影响的页面进行样式设置，但不会影响任何导航元素或页面本身（即更改正文的宽度）。重置 HTML、body、topnav 和 .pledge-bg（自定义 body 类）无效。

也就是说当使用js为移动菜单更改.topnav的子元素的显示时，.topnav的宽度会按预期更改为屏幕的宽度。

在每隔一个页面上，.topnav 占据屏幕宽度的 100%。包含标头的 HTML 结构是相同的。

CSS：

/*left:0 and right: 0 per @Magnus Eriksson*/

var myLinks = document.getElementById("myLinks");
if (myLinks.style.display !== "block") {
  myLinks.style.display = "block";
} else if (myLinks.style.display == "block") {
  myLinks.style.display = "none";
}

html {
  left: 0;
  right: 0;
  width: 100%;
  width: 100vw;
}

body {
  left: 0;
  right: 0;
  width: 100%;
  width: 100vw;
}

.topnav {
  left: 0;
  right: 0;
  position: fixed;
  top: 0;
  width: 100%;
  width: 100vw;
  height: 10%;
  height: 10vh;
  background-color: rgba(169, 169, 169, 0.75);
  color: white;
  font-size: 5rem;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
}

#topnav {
  left: 0;
  right: 0;
  width: 100%;
  width: 100vw;
}

.topnav #myLinks {
  left: 0;
  right: 0;
  z-index: 999;
  display: none;
  height: 100%;
  height: 100vh;
  width: 100%;
  width: 100vw;
  z-index: 11;
  background-color: rgba(148, 181, 201, 0.9);
  color: white;
}

.pledge-bg {
  left: 0;
  right: 0;
  background: url(img/ocean-nuke.jpg) no-repeat center center fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  width: 100vw;
}

<script src="https://nuclearterrortoday.org/test/swap.js"></script>

<body>
  <!-- <?php include "../../inc/header.php" ?>

-->

  <!-- Top Navigation Menu (header.php:)-->
  <div class="topnav" id="topnav">
    <div id="myLinks">
      menu
    </div>
  </div>
  <div class="main">
    <div class="main-header">
      <h1 id="vision">Miracles Have Been Created in The Past</h1>
      <p id="main1">10/10/1963 - We no longer test nukes in the ocean or atmosphere!</p>
      <img onclick="animateSlide('left')" class="control" id="lControl" src="img/leftArrow.png">
      <img onclick="animateSlide('right') " class="control" id="rControl" src="img/rightArrow.png">
    </div>
  </div>
</body>

【问题讨论】：

尝试设置left: 0; 和right: 0; 而不是width，看看是否有任何改变。
只需删除宽度：100vw 它还包括滚动条宽度，因此问题
您的 HTML 表明您已将 .topnav 包裹在 <aside> 中，您能告诉我们 .aside 的 CSS 样式吗？答案可能隐藏在那里。
aside 在这种情况下没有样式 - 我只是将它用作分隔代码的一种方式。也就是说，我删除了它，因为它不能帮助任何人回答这个问题。此外，还有很多未包含的 CSS 可能会影响页面上的某些内容，但不知道它是什么，我不想用 1,000 行来淹没这篇文章 - 我包括指向样式表也是如此
我假设您已经解决了这个问题，但我无法使用 Google Chrome 在我的 Mac 上复制您所描述的内容。我查看了您链接的网站，问题似乎不再存在

标签： html css

【解决方案1】：

不要在#topnav 上使用width: 100vw，只需使用width: 100%。此外，如果您为一个属性定义两个值，则最后一个值将覆盖第一个值，因此请不要这样做。

从.topnav 中删除width: 100vw 和width: 100%，因为id topnav 已经优先于类topnav，因此在.topnav 上应用的宽度将永远不会应用。

另外，从正文中删除所有样式。 left 和 right 不适用于 body 标签，因为它的位置是静态的。此外，body 默认采用 100% 宽度，您只需删除浏览器在 body 标签上应用的默认边距：

body {
    margin: 0;
}

另外，从HTML 标签中删除所有样式，原因与我在上面提到的body 标签相同。

【讨论】：

100vw 是保证获得全角的方式，而不管其他页面元素如何。 100% 是获得 100% 父级宽度的保证方式。由于不支持 100vw，因此 100% 是一个后备。正如您所提到的，第二个值是使用的值，因此支持 vw 的浏览器将使用 width: 100vw;不支持 vw 的浏览器会忽略它并使用 width: 100%;此外，您的解决方案不能解决问题（既不删除 vw 也不添加 margin: 0; 到 body 或两者）
因为没有完全支持 100vw。 stackoverflow.com/questions/31039979/…

【解决方案2】：

图片幻灯片的右箭头导致导航菜单的位置被抛出。右箭头当前编码为在 iphone 屏幕上显示在 -5%），它是包含 position:absolute 的 css。目前没有媒体查询来处理 iPad 尺寸以下设备的大小调整，因此在手机上，包含幻灯片 + 箭头的 main div 正在影响导航菜单；这导致了负面的“转变”。

很可能通过使用媒体查询在移动设备上将包含箭头的 div 进一步向下移动来解决此问题。

希望对你有帮助

【讨论】：

【解决方案3】：

其实这个问题是因为元素的class .top-bar.

因为你的.topnav 有

.topnav {
    position: fixed;
  }

您需要为您的.top-bar 赋予一些position 样式，这可以是

.top-bar {
   position: fixed;
  }

或

.top-bar {
   position: absolute;
  }

然后您可以为您的文本处理display属性，我认为它是网站的标题或徽标。

这是我修改的屏幕截图。 screenshot with the required changes

我希望这能帮助您解决问题。

【讨论】：

谢谢，但这是显示#myLinks 的javascript，它以某种方式纠正了问题。在导航菜单未激活的情况下尝试一下

【解决方案4】：

要使用宽度，需要使元素block或inline-block 例如：

.topnav {
display: inline-block !important;
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100vw !important;
height: 10%;
height: 10vh;
background-color: rgba(169,169,169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}

【讨论】：

这是正确的遮阳篷。只需要显示块。
可以是显示块或内联块。

【解决方案5】：

您可以通过两种方式进行修复，第一种方式是欺骗方式，第二种方式是正确方式。第一种方式，

移除宽度：100vw；来自 #topnav 和 .topnav。

第二种方式，

您的导航栏很好并且工作正常。但是您的某些元素的错了。当你使用 vw 作为宽度时。你应该小心。你的一切元素总宽度必须最大为 100%。我的意思是总宽度是 “宽度+左+右”。您应该检查并重新计算每个的总宽度宽度。

第二种方式的解决方案：：

    .main-header{
          min-width: 95%;
    }
    .form{
          width:95%;
    }

【讨论】：

【解决方案6】：

在导航栏错误的页面上有很大的差距在 2 个 <head> 标记内添加一些带有 <style> 标记的内联样式并尝试margin-top: -150px;

如果有效但不够，则增加负像素数。

【讨论】：

【解决方案7】：

这些信息不足以调试此问题。您提供的代码在 Codepen 中运行良好（topnav 是全宽的）。有一些额外的样式表或标记会影响您的布局，没有这些，这个问题就无法回答。

我唯一注意到的是 topnav 没有left: 0; 样式，导致左侧有一个小空白，但我不确定这是否是您所指的问题，因为它比10% 的差距。

【讨论】：

你可能是对的。我不想用不必要的代码重载这个问题。我现在正在做小提琴。我应该提到差距也完全在右侧
如果你的回答是“没有足够的信息来回答这个问题”，那么它可能应该是一个评论。
我创建了一个包含所有 html 和 css 的小提琴，小提琴很好。鉴于相同的代码在所有其他页面上显示全宽，你会从那里做什么？
@froggomad 我会检查 chrome devtools 中的 .topnav （或任何大小错误的元素），看看是否有任何样式被覆盖（它们会显示为划掉。然后您可以查看哪个样式表正在覆盖样式。您的代码显示正确。任何具有固定位置和 100vw 宽度的元素都应该是全角的，除非它的样式被另一个样式表覆盖。图片：i.imgur.com/lJdno9z.png