Question

更新：页面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（自定义主体类）无效。

也就是说，当使用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>

Answer 1

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

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

此外，从身体上移除所有样式。左和右在body标签上不起作用，因为它的位置是静态的。另外，默认情况下，主体的宽度为100％，您只需要删除浏览器在body标签上应用的默认边距：

body {
    margin: 0;
}

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

Answer 2

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

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

希望这会有所帮助

Answer 3

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

如果有效但不足以增加负像素数量。

Answer 4

实际上，此问题是由于具有 class .top-bar的元素引起的。

由于您的.topnav拥有

.topnav {
    position: fixed;
  }

您需要为position赋予一些.top-bar风格，并且可以

.top-bar {
   position: fixed;
  }

OR

.top-bar {
   position: absolute;
  }

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

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

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

Answer 5

要使用宽度，您需要将元素设置为 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;
}

Answer 6

您可以通过两种方式固定第一种方式是技巧方式，第二种方式是正确方式。

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

第二种方式，

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

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

Unique

Answer 7

此信息不足以调试此问题。您提供的代码可以在Codepen中正常工作（topnav为全角）。还有一些其他样式表或标记会影响您的布局，如果没有这些样式表或标记，则无法回答此问题。

我唯一注意到的是topnav没有left: 0;样式，导致左侧的空白很小，但是我不确定这是否是您要指的问题，因为它要小得多超过10％的差距。

固定div不能仅在一页上显示完整宽度

7 个答案: