0

私はウェブサイトを開発していて（ポートフォリオの再設計）、全幅で働いています。しかし、私は同じ問題を抱え続けています、そして私はそれを修正しようとしていますが、それはうまくいきません。

誰かが私を助けてくれれば幸いです。貼り付けるCSSとHTMLマークアップがたくさんあるので、ここにリンクだけを貼り付けますが、コンソールを見ると、そこで何が起こっているかがわかると思います。

リンク：ウェブサイト

問題は非常に明白です。水平スクロールが表示され、コンテンツをスクロールすると、何もない、空のスペース、おそらく幅が約60pxで溢れていることがわかります。padding: 0;、または考えられるものを追加しようとしmargin: 0;ましたが、成功しませんでした。

追加overflow: hidden;すると修正されることはわかっていますが、オーバーフローが必要です。

4

3 に答える 3

3

これを試してみてください、それは動作するはずです..firebugでそれをテストしました..そのクロスブラウザを願っています

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

それはいくつかのことかもしれません。

全幅に行くので、すべてが100％に設定されていますよね？しかし、下部には6つの要素があります。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 に答える