將DIV拉伸到頁面寬度

我需要一個div來擴展HTML文檔的整個頁面寬度，具體取決於它的內容。將DIV拉伸到頁面寬度

下面是這種情況：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Traditional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>testing</title> 
<style type="text/css"> 
body 
{ 
background-color:pink; 
padding:0; 
margin:0; 
} 
#testDiv 
{ 
background-color:red; 
} 
</style> 
</head> 

<body> 
<div id="testDiv"> 
<table width="2000px"> 
<tr> 
<td> 
test 
</td> 
</tr> 
</table> 
</div> 
</body> 

</html>

testDiv只會延伸到瀏覽器窗口的大小，而不是整個頁面本身。我已經得到了這種行爲與表格佈局，但我寧願如果有人可以提供一個CSS解決方案。我也需要爲IE 7工作的解決方案。

來源

2012-05-22 Kevin M.

你的HTML缺少[DOCTYPE（http://en.wikipedia.org/wiki/Doctype），你標記'互聯網資源管理器7'的問題。你想要一個HTML或IE7的解決方案嗎？ – phihag

你是對的;我編輯了這個問題 –

拉伸到內容的大小<div>內只設置display規則inline-block，對於IE7你將不得不包括一對夫婦的黑客爲好。

Example

<!DOCTYPE html> 
<html> 
    <head> 
    <title>testing</title> 
    <style type="text/css"> 
     body 
     { 
     background-color:pink; 
     padding:0; 
     margin:0; 
     } 
     #testDiv 
     { 
     background-color:red; 
     display: inline-block; 
     /* IE 7- hacks */ 
     zoom: 1; 
     *display: inline; 
     } 
     </style> 
    </head> 
    <body> 
    <div id="testDiv"> 
     test 
     <div style="width: 2000px"></div> 
    </div> 
    </body> 
</html>

來源

2012-05-22 15:00:36 Gabe

IE 7黑客你添加工作完美，謝謝 –

試試這個。 :)

html {width: 100%; height: 100%; padding: 0; margin: 0;} 
body {width: 100%; height: 100%; position: relative; padding: 0; margin: 0;} 
#testDiv {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

來源

2012-05-22 14:56:57

這不起作用unfortunatley :(。#testDiv仍然只能延伸到窗口的寬度只。 –

將DIV拉伸到頁面寬度

回答

相關問題