0

そのような中央に1つのレイヤーを持つHTMLドキュメントを作成しようとしました:

<body>
 <div id="background">
  LONG TEXT HERE
 </div>
</body>

そして私は設定しました

html, body  {
    margin: 0;
    height: 100%;
    min-height: 100%;
    background-color: #color1;
}

と

#background  {
    width: 80%;
    height: 100%;
    position: absolute;
    margin-left: 10%;
    display: block;
    margin-right: 10%;
    background-color: #color2;
    top: 0px; 
    bottom: 0px;
}

しかし、どういうわけか、テキストがディスプレイの高さを超えていて、下にスクロールすると背景がありません。ドキュメント全体が最初のウィンドウのサイズだけであるかのように見える FireBug をチェックインしました。私はそれを100％の高さにする必要があります。手伝っていただけませんか？

4

2 に答える 2

2

テキストがページよりも長い場合はoverflow、CSS でプロパティを設定する必要があります。そうしないと、要素がコンテンツに合わせて拡張されます。

例えば：

overflow: hidden;

これにより一部のテキストが見えなくなりますが、何をしているかによっては使用しautoないでください。hidden

于 2013-01-18T14:08:55.500 に答える
2

高さを削除: 100%; および位置: 絶対;

それが動作します。以下のように

#background  {
  width: 80%;
  margin-left: 10%;
  display: block;
  margin-right: 10%;
  background-color: #093;
  top: 0; 
  bottom: 0;
}
于 2013-01-18T14:11:24.360 に答える