-2 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body style="height:100%; width:100%; margin:0px; padding:0px">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
    <tr>
    <td height="100%"><div style="background-color:yellow; height:100%; margin-top:20px; margin-bottom:20px">part 1</div></td>
    </tr>
    <tr>
    <td valign="bottom">
    <div style="background-color:red; height:20px">part 2</div>
    </td>
    </tr>
    </table>
    </body>
    </html>

私はあれがほしい

  • 「パート1」（黄色の背景）上から20px
  • 「パート1」と「パート2（赤い背景）」の間の20px
  • 「パート2」（赤い背景）は常に下部にあり、高さは20pxです。
  • 「パート1」（黄色の背景）が残りの領域を占めます

どうやってやるの？上記のコードで試しましたが、動作しません。非常に助けが必要です...:)

4

1 に答える 1

0

トリッキー！これは機能するはずです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body style="height:100%; width:100%; margin:0; padding: 0">

    <div style="background-color:yellow; height: 100%">
        <div style="width: 100%; height: 20px; background-color: #fff"></div>
        part 1
    </div>

    <div style="background-color:red; position: absolute; left: 0px; bottom: 0px; width: 100%">
        <div style="width: 100%; height: 20px; background-color: #fff"></div>
        part 2
    </div>

</body>
</html>
于 2013-01-11T00:45:10.710 に答える