0

jsfiddle リンク: http://jsfiddle.net/djDWF/84/

問題は、テキスト/画像の内部コンテナー (テキストパディング) のマージン/幅が中央の背景画像に影響していることです。フッターに触れる繰り返し画像は高さいっぱいまで伸びず、中央とフッターの画像が一致しないように切り取られます (わかりにくいですが、私の jfiddle の例でテキストを追加または削除すると、中央の画像がフッターに接する場所で変更されます。)

これは学校のプロジェクト用であり、実際にこのタイプのイメージの背景を作成する必要はありませんでしたが、ここまでできたので続けたほうがよいでしょう。javaScript はまだコースに含まれていないため、可能であれば使用したくありません。

テキストラッパーを削除して、各 p タグを個別にスタイリングしようとしましたが、同じ効果が発生します。

また、line-height と margin を使用して数学的組み合わせも試しました。line-height を右マージンと下マージンに等しく設定し、左マージンをフッターの高さに等しく設定すると、効果は機能しますが、フッター画像が非常に大きいため、これは実行可能なソリューションではありません。

数学的には、フッターの高さと同じ比率を維持しようとしましたが、これもうまくいきませんでした (または、これは間違っていました。それぞれを同じ量で割ってみました)。

CSS のみを使用して、テーブルに頼らずにこれを行う方法はありますか?

4

1 に答える 1

2

つまり、問題は次のとおりです。コンテナが十分に大きくないため、繰り返される中央の背景が最後の繰り返しであることを完全に示していないため、フッターの分離に線が表示されます。

解決策:変数にする必要がなく、入れるコンテンツの量がわかっている場合は、高さを設定するだけです: ライブの例 - http://jsfiddle.net/djDWF/85。

div#background-center{
    background:url(http://i.imgur.com/gsNFa.png) repeat-y;
    float:left;
    width:700px;
    height: 1604px; /* add this */
}

明らかに、最終的なテキストに合わせて適切な高さを選択してください。

現在の画像では、JavaScript を使用せずにこれを自動的に行う方法はありません。

于 2012-05-08T22:59:48.577 に答える