HTML 5的佈局全屏

-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>

我想這
HTML 5的佈局全屏

「第1部分」（黃色背景）從上
20像素20像素之間的「第1部分」和「第2部分（紅色背景）」
「部分2」（紅色背景）總是在與20像素高度的底部
「第1部分」（黃色背景）佔用區的其餘部分

我該怎麼做？我試着用上面的代碼，但它不起作用。非常需要幫助... :)

來源

2013-01-11 user1968481

整蠱！這應該工作：

<!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-11 00:45:10

謝謝...它工作 – user1968481

對不起 - 我在Mac上 - 沒有IE訪問 - 不要太遠離該代碼雖然。它在做什麼？你能形容嗎？ –

HTML 5的佈局全屏

回答

相關問題