网站宽度超过 100%

Posted 2023-03-06

【中文标题】网站宽度超过 100%

【英文标题】：Website wider than 100%

【发布时间】：2013-07-29 23:24:22

【问题描述】：

如果你看一下this图片，你会发现我的导航栏旁边有一个小间隙，它设置为100%的宽度，应该覆盖整个屏幕。可能很难看到间隙，但滚动条（不是预期的）是可见的。使用overflow-x: hidden; 不是一个可行的解决方案，因为我使用的scrollto 函数会自动将我的页面滚动到右侧。最小化窗口会使间隙更大，如this 图像所示。您还可以看到我选择了不覆盖间隙的 body 元素。

我的部分代码：

body 
    40px 0 20px 0

#navigation 
    display: block;
    position:absolute;
    height: 40px;
    background: whitesmoke;
    width: 100%;
    top: 90px;

#Main 
    width: 1000px;
    margin-left: 175px;
    padding: 0px 0 0 0;

#sidebar 
    width: 300px;
    position: relative;
    float:right;
    left: -130px;

#sidebar .content 
    padding: 10px 10px;

.Post 
    padding-top: 10px;
    width: 520px;
    margin: 0px 0px 0px;
    line-height: 1.4;

现在我尝试将侧边栏移近左侧，这实际上消除了初始间隙。调整大小时出现的间隙仍然存在，如果删除整个侧边栏，它会变小。所以我想还有其他东西在推动这个页面。我搜索并发现了一些具有类似问题的问题，他们建议您删除浮动和左/右属性，但它们没有用。

所以我的问题很简单：如何消除间隙但仍保持布局？或者问题的原因是什么？

编辑：我只是试图删除侧边栏和帖子，它似乎解决了它。问题是我怎样才能保留它们？差距可能是由 #sidebar 或 .Post 或包裹在它们周围的 #Main 引起的。我不认为body标签有什么问题，因为删除#main内容解决了它。

【问题讨论】：

首先，你的body-tag 里面是什么？接下来，当设置为 100% 时，还要将 body 和 html 设置为 100% 宽度。

考虑使用编辑器的图片上传功能，这样你的图片就不会消失，以后的访问者仍然可以看到它们。

body 标签将是 内的所有内容。图 2 中的蓝色选择是身体内部的一切。我尝试将 html 和 body 设置为 100% 宽度，但这并没有改变任何东西。它说 Html 文档仅覆盖 1343 像素（在我的屏幕上是 100%），但如图 2 所示，差距是从无到有的。

【参考方案1】：

您不需要 javascript 来解决此问题。在你的#main 上使用 width:100% 并给它一个 max-width:1000px;这意味着它会在它可以的地方达到 1000 像素，或者当窗口太小时适合自己。

如果您能够将 e 结构本身放入我们的小提琴中，或者粘贴实时链接，这可能会更容易，这样我们就可以使用 CSS 并查看需要修复的地方。

【参考方案2】：

你的 CSS 有问题，我假设你想要：

body
  margin:40px 0 20px;

body 应该自动为 100%，所以我上面的代码应该可以工作，但请记住，% 是基于包含块的，所以 #navigation 不能在任何其他元素内，因为 @987654325 @上班。

请注意，如果其他元素比您的屏幕大，它们可能会自动拉伸您的body。根据您的操作，您可能想要使用px 或em，或者使用JavaScript 来确定您的屏幕尺寸。将以下内容保存在名为widthfix.js 的页面上：

var win = window, doc = document, bod = doc.getElementsByTagName('body')[0];
function E(e)
  return doc.getElementById(e);

function matchScreenWidth(element)
  var w = win.innerWidth || bod.clientWidth || doc.documentElement.clientWidth;
  element.style.width = w+'px';

现在，在您的body 底部：

  <script type='text/javascript' src='widthfix.js'></script>
  <script type='text/javascript'>
    matchScreenWidth(E('navigation'));
  </script>
</body>
</html>

【讨论】：

那行代码是主题自带的。但我试过了，没有改变任何东西。但是，我只是试图删除侧边栏和我的帖子，差距就消失了。因此，删除除导航之外的所有内容并保留围绕侧边栏和 .Post 的空 Main，解决了它。问题是我怎样才能保留它们。