Question

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

我的部分代码：

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

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

body{
  margin:40px 0 20px;
}

body应自动为100％，因此我的上述代码应该有效，但请记住%基于包含的块，因此#navigation无法在任何内容中其他元素，100%可以工作。

请注意，如果其他元素比您的屏幕大，则会自动拉伸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>

Answer 2

您不需要JavaScript来解决此问题。在#main上使用宽度：100％并给它一个最大宽度：1000px;这意味着它可以达到1000px，或者在窗口太小时适合自己。

如果我们能够将e结构本身放入我们的小提琴中，或粘贴实时链接，那么我们可以更轻松地使用CSS，看看需要修复的内容。

网站宽度超过100％

2 个答案: