-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 部分”（黄色背景）距顶部 20 像素
  • “第 1 部分”和“第 2 部分（红色背景）”之间的 20 像素
  • “第 2 部分”（红色背景）始终位于底部，高度为 20 像素
  • “第 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 回答