网站宽度超过 100%

Question

如果你看一下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内容解决了它。

Answer 1

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

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

Answer 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>