固定div只在一页上取宽度

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 <head>标签内添加一些带有<style>标签的内联样式并尝试margin-top: -150px;

如果它工作但不足以增加负像素数量。

Answer 4

实际上这个问题是因为带有类 .top-bar的元素。

因为.topnav有

.topnav {
    position: fixed;
  }

你需要为你的.top-bar提供一些position风格

.top-bar {
   position: fixed;
  }

要么

.top-bar {
   position: absolute;
  }

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

这是我修改的屏幕截图。 带有所需更改的屏幕截图

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

Answer 5

要使用宽度，您需要创建元素块或内联块例如：

.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％。我的意思是总宽度为“宽度+左+右”。您应该检查并重新计算每个宽度的总宽度。

第二种方式解决方案::

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

Answer 7

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

我注意到的唯一一件事就是topnav没有left: 0; 样式，导致左侧有一个小的空格，但我不确定这是否是你所指的问题，因为它比10％的差距要小得多。

固定div只在一页上取宽度

问题描述

7 个解决方案

解决方案1
4 2018-12-13 13:07:47

解决方案2
1 已采纳 2018-12-16 12:30:57

解决方案3
0 2018-11-29 15:15:22

解决方案4
0 2018-12-12 18:52:08

解决方案5
0 2018-12-15 14:12:40

解决方案6
0 2018-12-17 08:44:38

解决方案7
-1 2018-11-28 21:38:27

固定div只在一页上取宽度

问题描述

7 个解决方案

解决方案1 4 2018-12-13 13:07:47

解决方案2 1 已采纳 2018-12-16 12:30:57

解决方案3 0 2018-11-29 15:15:22

解决方案4 0 2018-12-12 18:52:08

解决方案5 0 2018-12-15 14:12:40

解决方案6 0 2018-12-17 08:44:38

解决方案7 -1 2018-11-28 21:38:27

解决方案1
4 2018-12-13 13:07:47

解决方案2
1 已采纳 2018-12-16 12:30:57

解决方案3
0 2018-11-29 15:15:22

解决方案4
0 2018-12-12 18:52:08

解决方案5
0 2018-12-15 14:12:40

解决方案6
0 2018-12-17 08:44:38

解决方案7
-1 2018-11-28 21:38:27