2016-08-19 24 views
0

基本佈局是頁腳標籤違抗分配行爲

<body> 
    <div class="wrapper"> 
     <nav></nav> 
     <myContent></myContent> 
    </div> 
</body> 
<footer></footer> 

凡軀應該放棄的身體下面,而不是由機構或其子女的CSS的影響。

我的目標是讓頁腳位於頁面的底部,而不管頁面內容包含多少或多少內容。這個CSS應該是訣竅:

body, html { 
     height: 100vh; 
     } 
    .wrapper { 
     min-height: 96vh; 
     position: relative; 
     } 
    footer { 
     width: 100%; 
     height: 4vh; 
     position: relative; 
     bottom: 0; 
     font-size: .75em; 
     } 

在我的瀏覽器檢查中,頁腳包含在body標籤中。這沒有意義。此外,頁腳顯示其寬度與視口相同,但不反映演示模型中的寬度。相反,它的左邊框位於頁面的左側,在右側有大約10%的空白區域。設置backround-color: yellow證實了這一點。最後,除非<myContent>將其推到屏幕視圖的下方,否則該位置將無法進入底部。

這個設置有什麼問題?

回答

0

在HTML5中,大多數不是專門在<head><body>元素中的所有內容(無論您是否實際聲明)都被分配給適當的任何一個。如果必要元素不存在,則創建它。

根據the HTML5 spec,<html>,<head><body>是可選的。大多數瀏覽器根據需要創建缺少的元素。 (根據我的經驗,主要關注表和<thead><tbody>。)

請注意,您使用瀏覽器的檢查器看到的代碼通常是瀏覽器在修復它從服務器獲得的內容後處理的代碼。

0

在HTML中,body標籤包圍頁面的可見元素。 HTML具有HEAD元素,但該元素不適用於可見內容,適用於不可見元素,如指向樣式表的鏈接等.FOOTER元素正確屬於BODY元素。

0

的問題是,具有所述主體的外部的元件是無效的HTML。現代瀏覽器會糾正這一問題,並將其移入內部。

0

感謝上面關於頁腳/身體位置的說明。最後我讀了一個可以將頁腳放在身體內部或外部的地方,但是你的評論已經被注意到了。

我的頁腳行爲不當,因爲檢查器縮放在索引頁上發生了變化,但沒有更改任何其他頁面。我不知道這是怎麼發生的,但重置將它放在需要的地方。