html與css(height設定%數)

我想問的問題其實雖然跟%數有關但是我寫了兩個版本,一個把第一行的<!doucment....等去掉是可以work,這其實算是第一個問題...寫法可以work的html如下:

<html>

<head>

<title>

</title>

</head>

<body>

<div id="test">

<p>

12345

</p>

</div>

</body>

</html>

css如下:

#test

{

margin:0 auto;

width:600px;

height:10%;

background-color:yellow;

}

而無法work的html:

<!DOCTYPE html>

<html>

<head>

<title>

</title>

</head>

<body>

<div id="test">

<p>

12345

</p>

</div>

</body>

</html>

基本上我要的是黃色框框的高度會隨著視窗大小而只距離10%,兩個html語法不同之處只在於前面有無輸入驗證tag

這都有在這兩個網頁實驗

http://jsbin.com/ubalax/447/edit

http://jsbin.com/ubalax/448/edit

確實結果也一樣

不曉得問題是出在哪

而我又發現,在有驗證的那個html的css若輸入

position:absolute;

就又ok了,但因為我不要絕對路徑,所以這也不會是我要的,就算是我要的,我也很想知道為什麼這樣就可以run了....

已更新項目:

不是"有沒有宣告"的差別

而是我想要做到那個黃色框會隨視窗大小的高度而做變化

不懂的是為何沒那麼簡單

我是在不斷嘗試後不小心發現沒有打驗證竟然就可以run"以及"輸入position:absolute;也可以run,

當然若能解釋後者是最好的.前者我也很清楚驗證是必須的.

1 個解答

評分
  • water
    Lv 5
    7 年前
    最佳解答

    你的問題應該是有沒有宣告<!DOCTYPE>有什麼差異對嗎?

    <!DOCTYPE> 這個東西是屬於DTD檔的一種東西

    它的作用在於幫助瀏覽器判別HTML的版本同時也影響到CSS樣式讀取的方式

    你在範例448中宣告的<!DOCTYPE html> 是屬於 HTML5的

    其它的如果有興趣可以用「DTD」或「DOCTYPE」當作關鍵字去Google去搜尋

    網路上資料很多這邊就不贅述

    網頁如果沒有宣告<!DOCTYPE>

    瀏覽器會有一個預設讀取HTML的模式(又稱作「相容模式」)

    舉比較明顯的例子來說

    IE如果沒有宣告的話預設的相容模式聽說是IE5

    也就是說你宣告的CSS如果是IE5不支援的語法那麼就不會顯示出效果

    建議是要養成宣告DTD的好習慣

    不然有時候設定版型會很麻煩 尤其是瀏覽器如果更新版本有異動的時候

    運氣不好有可能會出現跑版的情況

    參考資料: 自己
還有問題?馬上發問,尋求解答。