私はウェブサイト（ポートフォリオの再設計）を開発していますが、私は全幅で作業しています。しかし、私は同じ問題を抱えていますが、私はそれを修正しようとしていますが、うまくいきません。ウィンドウのオーバーフローが全幅ページ
誰かが私に助けてくれるのであれば、私は感謝します。貼り付けとHTMLマークアップに多くのCSSがあるのでここではリンクのみを貼り付けますが、コンソールを見てそこに何が起こっているのか見ることができます。
リンク：Website
それはかなり明白だ問題、あなたは水平方向のスクロールが表示され、コンテンツをスクロールした場合、広いと思うかもしれない60PXについて、何もするだけの空きスペースをオーバーフローしていますことがわかります。私はpadding: 0;、margin: 0;または私が考えることができるものを追加しようとしましたが、成功しませんでした。
overflow: hidden;を追加すると修正されることがわかりますが、そこにオーバーフローが必要です。
はこれを試してみてください、それが動作するはずです...希望...放火魔でそれをテストしましたそのクロスブラウザ
html {
color: #222222;
font-family: sans-serif;
overflow: hidden;
}
私のブラウザでは、水平または垂直スクロールバーが表示されません。しかし、あなたのような標準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;
}
多分あなたのウインドウは '1366px'以上のサイズを持っています。なぜならそれは私の画面サイズとスクロールバーだからです。とにかく、私はすでに正規化スタイルを使用しています。http://html5boilerplate.comは、最適化が必要なものをほとんど最適化するために使用しています。 – Roland
これはいくつかの可能性があります。
あなたは全幅になるので、すべてを100％に設定します。そうですか？しかし、底には6つの要素があります。 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;
}
お役に立てば幸いです。
確かに、それは多くのもののためかもしれません。私はそれをより良くすることができましたが、それでも問題は解決しません。そして、はい、フッタは何とか完全に分割されていませんが、わかるように、hrefタグの2つを17％に変更して、フィットさせるようにしました。私は5ブロックも作ったと思ったが、結局それをやることになるだろう。 – Roland
私が言ったように、私は 'overflow：hidden'を使いたくはありませんが、これまでは唯一の解決策であるようです。 – Roland
私は 'overflow：hidden'で何か間違っていません..ページのいくつかの要素が100％以上展開していますので、' overflow：hidden'へのラッパーの設定は良い回避策になるはずです。その完璧な解決策ではありません。 –