table和div設定height:100%無效的完美解決方法
阿新 • • 發佈：2019-01-30
首先說一下table，他比較容易解決，當我們使用Dreamweaver來製作網頁，新建一張網頁，通常在程式碼頭部會有類似以下的程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
沒錯，你猜對了，問題就出在這裡，你試著把這短程式碼刪除，然後再重新整理一下網頁，你就會看到所有table以你的設定height="100%"的展示！
這段程式碼是告訴瀏覽器你的網頁是遵循什麼標準的，如上面的“W3C”標準，刪除掉一般是不影響的。
下面說一下div，div和table一樣，如果要實現width:100%是很容易的，但要div的height:"100%"，它就不大聽話了，其實不是它不聽話，是你不知道讓它聽話的方法。如下程式碼：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>測試</title>
</head>
<body>
<div style="height:100%"></div>
</body>
</html>
就算和Table一樣去掉頭部的那段程式碼也不能100%顯示，原因很簡單，你讓div的height="100%"，執行網頁時，css先執行到，而整個網頁中的內容還沒有完全載入，是獲取不到div外面的<body>等的高度的，所以height="100%"也就不能如願顯示了。加上
body{height:100%}
就輕鬆解決啦，一開始就讓body以100%顯示，他的下級div自然就100%的，不過對於FF瀏覽器還應該把HTML也先給height:100%，即
html,body{height:100%}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
沒錯，你猜對了，問題就出在這裡，你試著把這短程式碼刪除，然後再重新整理一下網頁，你就會看到所有table以你的設定height="100%"的展示！
這段程式碼是告訴瀏覽器你的網頁是遵循什麼標準的，如上面的“W3C”標準，刪除掉一般是不影響的。
下面說一下div，div和table一樣，如果要實現width:100%是很容易的，但要div的height:"100%"，它就不大聽話了，其實不是它不聽話，是你不知道讓它聽話的方法。如下程式碼：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>測試</title>
</head>
<body>
<div style="height:100%"></div>
</body>
</html>
就算和Table一樣去掉頭部的那段程式碼也不能100%顯示，原因很簡單，你讓div的height="100%"，執行網頁時，css先執行到，而整個網頁中的內容還沒有完全載入，是獲取不到div外面的<body>等的高度的，所以height="100%"也就不能如願顯示了。加上
body{height:100%}
就輕鬆解決啦，一開始就讓body以100%顯示，他的下級div自然就100%的，不過對於FF瀏覽器還應該把HTML也先給height:100%，即
html,body{height:100%}