css - Css の位置: 修正されたコードは div の位置を壊します

Question

シンプルな HTML ページがあり、div縦に並んだ 2 つの が含まれています。second のため、ページはスクロール可能ですdiv。最初divの の位置を固定するか、スクロールできないようにして、2 番目の位置だけdivをスクロールできるようにします。position:fixedfirstの cssに追加したdivのですが、今回はdivfirst の上に second を置いたdivので、 firstdivが second の下に消えてしまいましたdiv。

CSS

body {
  width:1000px;
  height:100%;
  margin:0 auto;/*body ortalama*/
}

#div1 {
  height:300px;
  background-color:#00CC66;
}

#div2 {
  display:block;
  word-wrap:break-word;
  padding:30px;
  font-size:72px;
  background-color:#FF3;
}

HTML

<div>
  <div id="div1"></div>
  <div id="div2">
    <p>
      <!--Content Here-->
    </p>
  </div>
</div>

Answer 1

この css を追加し#div2ます (高さを指定する必要があります。指定し#div2ないと、スクロール バーが開始位置を認識できません)。

  overflow-y:auto;
  height:50px;

次の例を参照してください: http://jsfiddle.net/38xkn/1/body (幅を 100px に設定しているので、最初に右にスクロールすると、のスクロール バーが表示されます#div2)。