Question

在此简化的HTML中，我有一个固定的div，它应等于窗口的确切宽度。但是div上方的内容中还有一个很长的单词，会弄乱布局。

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
    <style>
      div {
        position: fixed;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body><p>Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword</p>
    <div><b>0%</b><b>25%</b><b>50%</b><b>75%</b><b>100%</b></div>
  </body>
</html>

长单词似乎导致“视口”延伸得比窗口宽，因此div（固定到视口）最终比窗口宽。

现在，这仅在移动设备上发生，即使使用Chrome开发工具也是如此。在桌面模式下，一切正常：

但是更改为“移动”，固定div会延伸：

有两个问题：

如何防止div延伸到窗口之外？
当我切换到“移动”视图时，Chrome Dev Tools有何不同之处？

Answer 1

1）我设法通过以下方式解决了我可以用您的代码创建的所有问题：

p {
  max-width: 100vw;
  overflow: hidden;
}

2）当我弄乱CSS并刷新页面时，Chrome会使用该div的宽度执行非常奇怪的操作。即使使用相同的CSS，它也不会始终呈现一致。实际上，我打开了两个选项卡，即使刷新时，该页面显示的页面也不同于同一文件中的相同代码。我认为div小于视口时的行为可能是不确定的，您必须使用类似我的解决方案的方法来告诉Chrome该怎么做。

Answer 2

此问题是由justify-content: space-between引起的。您实际上没有设置宽度，不同的东西会增加不同的间距。

如果您要像这样设置div的宽度：width: 300px，则该宽度在移动设备或pc上不会更改。

固定div的宽度比移动设备上的屏幕宽。为什么？

2 个答案: