<!DOCTYPE>影響<body>大小，無法獲得<body>填滿整個窗口

-1

我正在設計一個網頁，其頁尾有一個頁腳。當然，即使內容的長度小於頁面的實際高度，也要將頁腳粘貼到頁面的底部。經過一番搜索之後，我發現要走的路是絕對地將頁腳放在底部：0px的身體並使身體填滿整個頁面。對？錯誤。不管我試過了，頁面的主體會縮小，以適應在它的元素（我想CSS和JS，沒有用），只是當我正要放棄時，我發現它確實在互聯網上的樣本完全一樣的東西。又過了兩個小時的頭撞之後，我發現那個頁面和我的頁面之間的區別在於我的開始有一個標籤（由Visual Studio放在那裏）。<!DOCTYPE>影響<body>大小，無法獲得<body>填滿整個窗口

我做了一些進一步研究，但我找不到任何解釋，爲什麼出現這種情況，或者，更重要的是，什麼是不包括DOCTYPE後果？這會在以後導致問題嗎？如果是這樣，我能做些什麼關於身體元素的高度？

編輯：這是我的身體的CSS：

body { 
background-image: url("images/back.png"); 
margin: 0; 
padding: 0; 
min-height: 100%; 
height: 100%; 
}

，這是HTML（這是ASP，其實）：

<%@ Page Language="C#" %> 

<!DOCTYPE HTML> <!-- this line (included by default by Visual Studio) causes the body's height to snap to its contents, as height: auto does --> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script src="header.js"></script> 
</head> 
<body> 
. 
. 
. 
</body> 
</html>

我也嘗試過各種其他的doctype我在網上找到，而且我仍然得到相同的結果。

來源

2014-03-07 Arshia001

你包括哪些文檔類型？ –

你可以發佈你的'CSS'和'HTML'。 –

您可以使用類似：'。主要 { 最小高度：520px; }'設置頁面的最小高度。 – Iqbal

下面是如何使用的CSS的屏幕上的位置的簡單示例。檢查這個fiddle。

<div class="bottom"></div> 

.bottom { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    height: 20px; 
    background-color: black; 
}

來源

2014-03-07 15:27:28 C1pher

您可能正在尋找一種解決方案來將您的網站頁腳粘貼到底部。如果您通過ajax加載內容，並且加載期間整個Web內容變爲空白，這會成爲一個真正的問題。

，我最終發現是比任何其他是給高100％到您的身體和HTML和所有的內容除了在另一個DIV您的頁腳，並給它一些填充的解決方案。填充有助於使用絕對位置清除底部的頁腳，否則您的內容也會與頁腳重疊。

下面是一個例子：

html, body { 
    height: 100%; 
} 
.container { 
    padding-bottom: 20px; /* if your footer height is 20px including paddings and margins */ 
} 
.footer { 
    position: absolute; 
    bottom: 0px; 
}

，你可以直接讓你的頁腳的寬度爲100％和文本對齊中心，如果你想在你的頁面的中心。

至於文檔類型而言，我們大多數人使用的標準 - 它能夠更好地保持這種方式，因爲它很容易讓你的瀏覽器，以瞭解它是什麼類型的HTML。

來源

2014-03-07 16:20:16 descene

正是我想要做的。除了高度：100％不適用於任何文檔類型。 – Arshia001

你是否試圖爲文檔類型本身添加100％的高度？這只是您的文檔類型的聲明。 – descene

當然不是。這工作：<車身風格= 「高度：100％」>但是這一次沒有：<！DOCTYPE HTML><車身風格= 「高度：100％」> – Arshia001

<!DOCTYPE>影響<body>大小，無法獲得<body>填滿整個窗口

回答

相關問題