46

3 つの div があるとします。

<div id="outer"></div>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

#one {
  position:fixed;
  top:0px;
  left:0px;
}

#two {
  width: 80%;
  height:500px;
}

#three {
  width: 80%;
  height:500px;
}

div の "two" と "three" は、位置が固定されているため、div の "one" と重なっているように見えます。

1) 重ならないようにする最善の方法は何ですか?

2) ユーザーが下にスクロールしても、固定 div が高さの 100% を占めるようにする最善の方法は何ですか? (サイドバーのように、div 2 と 3 と同じ側に沿って実行したい新しい div を防ぎます) #2 と #3 のフロートを使用する最善の方法はありますか?

4

4 に答える 4

12

1:

追加margin-leftすることで、長い固定 div が他の部分と重ならないようにすることができます。

#two, #three {
    margin-left:20%;
    width:80%;
    height:500px;
}

2:

を追加するbottom:0px;と、上から下に広がるため、ウィンドウの高さになります。

#one {    
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;   
    width:20%; 
}

注:また、div に 20% の柔軟な幅を追加#oneして、他の 2 つの柔軟な幅の div とうまく連携できるようにしました。

フィドル: http://jsfiddle.net/ZPRLd/

于 2013-06-05T21:44:33.103 に答える