Question

我正在开发一个网站（投资组合重新设计），我正在全力以赴。但我仍然遇到同样的问题，但是我正在尝试修复它，它只是不起作用。

如果有人可以帮我解决这个问题，我会很感激，我会在这里只粘贴链接，因为要粘贴和HTML标记有很多CSS，但我认为通过查看控制台，您可以看到正在发生的事情。 / p>

问题非常明显，你会看到一个水平滚动出现，如果你滚动内容它没有任何东西溢出，只是空的空间，我认为可能大约60px宽。我尝试添加padding: 0;，margin: 0;或我能想到的任何内容，但没有成功。

我知道添加overflow: hidden;会修复它，但我需要在那里溢出。

Answer 1

尝试这个，它应该工作..用firebug测试它..希望它的跨浏览器

html {
color: #222222;
font-family: sans-serif;
overflow: hidden;
}

Answer 2

这可能是一些事情。

因为你的全宽，所以每一次都设定为100％，对吗？但在底部你有六个元素。 100/6 = 16.6666666666667等等。它并没有很好地划分。我看到你下降到16.5，但这只会达到99％。对于百分之几的派系，我从来没有好运过。你能不能将你的底部导航减少到5个元素甚至20％？

您也可以尝试使用粘性页脚和相对定位，就像我 here 一样。

HTML：

<html>
<body>

<div id="wrapper">    
<nav>
  <ul>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
  </ul>
</nav>

<footer>
  <ul>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
  </ul>
</footer>

</div>
</body>
</html>

CSS：

html, body {
  width: 100%;
  height: 100%;
  background-color: #333333;
  position: relative;
}

#wrapper {
  min-height: 100%
  position: relative;
}

nav {
  width: 100%    
}

nav li {
  display: block;
  background-color: #222222;
  width: 25%;
  float: left;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;  
}

footer li {
  display: block;
  float: left;
  width: 20%;
  background-color: #cccccc;
 }

希望有所帮助。

Answer 3

在我的浏览器中，我没有看到任何水平或垂直滚动条。但是，您可以尝试使用标准DOCTYPE，如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">

并在css的开头添加以下内容：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

全宽度页面中的窗口溢出

3 个答案: