1

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

我的部分代码：

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内容解决了它。

4

2 回答 2

0

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

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

于 2013-07-31T18:15:48.857 回答
0

你的 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>
于 2013-07-30T00:50:55.900 回答