css - 网站宽度超过 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;
}

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

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

编辑: 我刚刚尝试删除侧边栏和帖子，它似乎解决了问题。问题是我怎样才能保留它们？差距可能是由 #sidebar 或 .Post 或 #Main 引起的，#Main 围绕着它们。我认为 body 标签没有任何问题，因为删除 #main 内容解决了它。

Answer 1

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

body{
  margin:40px 0 20px;
}

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

请注意，如果其他元素比您的屏幕大，它们可能会自动拉伸(stretch)您的 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>