0

私はcssコードを持っています:

#container {
    background: url("/static/img/fauxColumns1.png") repeat-y;
    overflow: hidden;
    width: 100%;

、div に適用します。これにより、div イメージがページの下部まで繰り返されます。

ページの上部に div があります。

#navbar {
    background-color: silver;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-bottom: 10px;
}

、その下に 10px のマージンを正常に作成します。

ただし、divもあります：

#footer {
    background-color: silver;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    clear: both;
    text-align: center;
}

、しかし、「margin-top: 10px」を使用すると、「fauxColumns」がギャップをカバーするために拡張されるため、マージンが正常に作成されません。

それで、誰もこれを回避する方法を知っていますか？

編集: http://jsfiddle.net/Tj3jH/1/ しかし、img ファイル、つまり fauxColumns.png を追加する方法がわかりません (他のサイトにアップロードしてリンクする必要があると思いますか?) whiteLine10px.png の問題を修正しますが、それでどこにも行きません...

4

1 に答える 1

1

あなたのフィドルに基づく@ s_qw23への応答とは異なり#footer、実際にはコンテナの子でした​​。

#footer外に移動すると#container、問題が修正されます。（背景画像を取得するために bing を使用しました...効果があるかどうかは疑問ですが、確認するためにテストする必要があります）

ワーキングjsFiddle

于 2013-04-26T22:20:57.643 に答える