0

ここでいくつかの解決策を探した後、誰もが私が直面している反対の問題を抱えているようです (ha!)。私が達成しようとしているのは次のとおりです。ページの読み込み時に幅 100%、高さ 100% の DIV があります。これは、画面サイズに関係なく、常に完全なホームページ イメージを取得できるようにするためです。ただし、その下にスクロールして追加のコンテンツを表示できるようにしたいと考えています。少し動作するようにリギングしたところですが、グリッチがあります。ここにHTMLがあります::

<div id="ScalableImage"></div>
<div id="BlockWhite" style="height:1000px"></div>
<div id="BlockBlue1" style="height:300px"></div>
<div id="BlockBlue2" style="height:50px"></div>

ここで、「BlockWhite」が 1000px の高さにスタイル設定されていることがわかります。これは、「ScalableImage」の背後に隠れているためです。下に巣を作ることはできません!!!

とにかく、ScalableImage とカラー ブロックの CSS は次のとおりです::

#ScalableImage {
position: absolute; 
display:block;
top:0; 
left:0; 
width:100%; 
height:100%;
max-height:900px;
background: url(/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:700;
  }

#BlockBlue1 {
position:relative;
float:left;
background-color:#c5d1d1;
width:110%;
margin-left:-10px;
margin-bottom:-10px;
min-height:20px;
clear:both;
}
#BlockBlue2 {
position:relative;
float:left;
background-color:#95aab2;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}

#BlockWhite {
position:relative;
float:left;
background-color: #fff;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}

アイデア？

ありがとう！

4

1 に答える 1

0

「#ScalableImage」が「#BlockBlue1」と重なる理由は、「#ScalableImage」position: absoluteのスタイリングにあるためです。つまり、レイアウトから引き出され、他の要素をカバーします。

あなたが探しているもの（私が思うに）を達成するには、そのposition:absoluteスタイルを削除してから追加することをお勧めします：

body, html{
    height:100%;
    margin:0;
}

(マージン 0 は、ブラウザーが body/html 要素をマージン付きでレンダリングする場合に備えてのものです。)

これがお役に立てば幸いです。幸運を！

(編集) 私が見ているものを示すために JSFiddle を追加しました: http://jsfiddle.net/BDd62/

(編集 2) 追加のコードを見て、その空白の理由を特定したと思います。この場合、実際に親要素を移動する「#htxt」の上マージンが原因です。(これが発生する詳細な説明については、こちらを参照してください。いくつかの方法でこれを回避できますが、私が作成した CSS の変更部分を次に示します。これが希望のレイアウトでない場合は、私が知っている：

#bg {
    display:block;
    width:100%; 
    height:100%;
    max-height:900px;
    background: url(http://bwpcommunications.com/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:700;
}
#htxt {
    position:relative;
    font-family: 'Raleway';
    font-weight:bold;
    font-size: 6em;
    text-align:center;
    color:#FFF;
    width:80%;
    max-width:960px;
    line-height:100px;
    margin:0 auto 22%;
    padding:22% 0 0;
    z-index:800;
}
#hsubtxt {
    position:relative;
    font-family: 'Raleway';
    font-size: 3em;
    text-align:center;
    color:#FFF;
    width:80%;
    margin:2% auto 0;
    z-index:800;
}

これがあなたを助けることを願っています! 完全なコードを表示するために更新された JSFiddleを次に示しますが、完全なブラウザーで実行することをお勧めします (レイアウトが JSFiddle 環境の小さなウィンドウ サイズに合わせて最適化されていないためです。

于 2013-06-24T20:47:34.833 に答える