0

我正在开发一个网站（投资组合重新设计），并且我正在全幅工作。但是我一直遇到同样的问题，但是我正在尝试解决它，但它不起作用。

如果有人可以帮助我，我将不胜感激，我将仅在此处粘贴链接，因为要粘贴的 CSS 和 HTML 标记太多，但我认为通过查看控制台，您可以看到那里发生了什么。

链接：网站

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

我知道添加overflow: hidden;会解决它，但我需要那里的溢出。

4

3 回答 3

3

试试这个，它应该可以工作..用萤火虫测试过..希望它的跨浏览器

html {
color: #222222;
font-family: sans-serif;
overflow: hidden;
}
于 2012-05-05T13:23:19.983 回答
1

这可能是几件事。

因为你要全宽，所以一切都设置为 100%，对吧？但在底部你有六个元素。100/6 = 16.6666666666667 等等。它不能很好地划分。我看到你四舍五入到 16.5，但这只会产生 99%。我从来没有在百分比派系中获得好运气。您能否将您的底部导航减少到 5 个元素，甚至减少 20%？

您也可以尝试使用粘性页脚和相对定位，就像我在这里所做的那样。

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;
 }

希望有帮助。

于 2012-05-05T15:53:14.723 回答
0

在我的浏览器中，我看不到任何水平或垂直滚动​​条。但是，您可以尝试使用以下标准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;
}
于 2012-05-05T13:22:30.833 回答