5

次の css 属性を持つメイン ラッパー div があります。

div#mainWrapper {
    margin: auto;
    width:70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
}

div 全体を作成したいのですが、div 自体が空であっても、表示されるのは難しいです。

私は使用したくないposition:fixedかposition:absolute、可能であれば。

4

5 に答える 5

5

親コンテナーで高さを設定しない限り、高さは#mainWrapper0 に計算され、背景の画像や色は表示されません。

高さを 100px に設定して、画像が正しく読み込まれていることを再確認します。

相対的な高さを使用する場合は、body タグと html タグの高さが 100% であることを確認してください。

于 2013-06-19T21:00:29.407 に答える
3

HTMLまたはbody要素が十分に大きくない可能性があります。height:100%親コンテナーの高さのみを埋めるため、これを CSS に追加してみてください。

html, body 
{
    height:100%;
}

http://jsfiddle.net/unt9M/は、単一の色付きの背景を使用してこれを示しています。上で説明した CSS を削除すると、本文と HTML が十分に大きくないため、div が 1 行になっていることがわかります。

于 2013-06-19T21:01:47.057 に答える
2

追加：

body,html{
  height:100%;
}

http://jsfiddle.net/derekstory/xU2g9/を参照してください

例を示すために背景色を追加したことに注意してください。

于 2013-06-19T21:01:57.137 に答える
1

あなたの親はとのスタイルを持っていますか?widthheight

親が次のようになっている場合は、次のbodyようにしてください。

CSS

html,body{
    width:100%;
    height:100%;
}

div#mainWrapper {
    margin: auto;
    width:70em;
    height:100%;
    background: url('http://images04.olx.com/ui/1/50/31/12504931_1.jpg') no-repeat center center fixed;
    background-size: cover;
}

JSFiddle

于 2013-06-19T21:01:51.637 に答える
0

私は単純にフロートを追加しました：

div#mainWrapper {
  margin: auto;
  width:70em;
  height:100%;
  background: url(../images/header.jpg) no-repeat center center fixed;
  background-size: cover;

  float: left/right;
}
于 2020-01-15T21:21:16.650 に答える