1

この写真を見ると、ナビゲーション バーの横に小さなギャップがあることがわかります。これは幅 100% に設定され、画面全体をカバーするはずです。ギャップがわかりにくいかもしれませんが、意図しないスクロール バーが表示されます。私が使用している機能のために、ページを自動的に右にスクロールするため、使用overflow-x: hidden;することは実行可能な解決策ではありませんでした。この画像scrolltoに示すように、ウィンドウを最小化すると、ギャップがさらに大きくなります。ギャップをカバーしない body 要素を選択しているのもわかります。

私のコードの一部:

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

ここで、サイドバーを左に近づけようとしましたが、実際には最初のギャップがなくなりました。サイズを変更したときに表示されるギャップはまだそこにあり、サイドバー全体を削除すると小さくなります。だから私はページを押している何か他のものがあると思います. float と left/right のプロパティを削除するように提案されたが、機能しなかった同様の問題に関するいくつかの質問を検索して見つけました。

だから私の質問は簡単です:ギャップを削除してもレイアウトを維持するにはどうすればよいですか? または、問題の原因は何ですか?

編集：サイドバーと投稿を削除しようとしたところ、解決したようです。問題は、それらをどのように維持できるかです。ギャップはおそらく、#sidebar または .Post のいずれか、またはそれらの両方にラップされている #Main によって引き起こされます。#main コンテンツを削除すると解決したので、 body タグに問題はないと思います。

4

2 に答える 2