0

私はこの単純なxhtmlを持っています：

<?xml version="1.0" encoding="UTF-8"?>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
  <div style="height: 100%; overflow: auto; background-color: #00f;">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
  </div>
</body>
</html>

2つの長方形が表示されますが、下（青）の長方形には2000pxの余白が表示されません。それは窓と同じくらいの高さです。なんで？またはもっと重要なのは、どうすれば表示できるようにするのですか？これら2つの間に「aaa」のようなダミーテキストを追加することはできます</div> </div>が、それが正しい方法だとは思いません。

助けてくれてありがとう！

4

5 に答える 5

1

400px divの下に2000pxの青が必要な場合は、次のように変更します。

含まれているdivの高さを、コンテンツの高さ+2000pxのスペースに変更します。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">

<head> </head>

<body style="height: 100%;">

  <div style="height: 2400px; overflow: auto; background-color: #00f;">

    <div style="height: 400px; background-color: #f00;">
    </div>

  </div>

</body>

</html>
于 2009-01-28T02:21:06.527 に答える
0

height: 100%から削除します<body>:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body>
  <div style="height: 100%; overflow: auto; background-color: #00f;">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
  </div>
</body>
</html>
于 2009-01-28T02:41:29.357 に答える
0

height青い背景の div の宣言を取り除きます。

<?xml version="1.0" encoding="UTF-8"?>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
</head>
<body style="height: 100%;">
  <div style="background-color: #00f;overflow:auto">
    <div style="height: 400px; margin-bottom: 2000px; background-color: #f00;"></div>
      </div>
</body>
</html>
于 2009-01-28T02:45:48.053 に答える
0

これは、含まれている div に高さが設定されているためです。マージンはコンテンツではないため、オーバーフローを引き起こしません。最も内側の div の周りに別の div を追加して 1px のパディングを与えるか、他の人が示唆しているように、既存の含まれている div を調整することができます。

于 2009-01-28T02:49:51.277 に答える
0

lotusvskoi: ありがとうございます。ただし、外側の div ではなく、本文がスクロールします。

endash: はい！これです！解説もありがとうございます。padding: 1px を使用して、最も内側の div を別の div 内にラップすると、うまくいきます!

アーカイブ用の最終バージョン:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<style>
</style>
</head>
<body style="height: 100%;">
<div style="height: 100%; overflow: auto; background-color: #00f;">
<div style="padding-bottom: 1px;">
<div style="height: 400px; margin-bottom: 2000px; background-color: #f00;">
</div>
</div>
</div>
</body>
</html>

于 2009-01-28T02:59:24.423 に答える