<！DOCTYPE HTML>引起的頁眉和頁腳打破

我有一個頁眉和頁腳的文檔。除了使用position:fixed的，我使用3個的div，與中心的div滾動，而不是文件。下面是我的代碼：<！DOCTYPE HTML>引起的頁眉和頁腳打破

<style> 
html{ 
    overflow:hidden; 
    font-size: 80px; 
} 
.content{ 
    display:block; 
    top:10%; 
    position:relative; 
    overflow:auto; 
    width:100%; 
    height:80%; 
} 
.header{position:absolute;top:0;} 
.footer{position:absolute;top:90%;} 
</style> 
<div class="header">Hover</div> 
<div class="content"> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
    lorem ipsum <br /> 
</div> 
<div class="footer">Hover</div>

這個工作正常，但如果我添加<!DOCTYPE html>打開HMTL5標準模式下，網站開通（頁面滾動，而是和它的頁眉和頁腳滾動，而不是固定）。

有我的代碼的任何問題，或者是有什麼，我想做一個更標準的方式嗎？（不使用位置：固定的，當我編譯我的網站到Android不工作）

來源

2013-06-19 mirhagk

小提琴請..... –

您可能需要添加'HTML，身體{身高： 100％}' – Pete

請使用縮進（特別是當你與他人分享你的作品時）。 – rgtk

-1

使用position:fixed代替position:absolute，但你還必須添加適當的meta標籤，它的工作：<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

相應地進行調整...

來源

2013-06-19 16:50:13 Xarcell

我有幾乎相同的元標記，唯一不同的是我的寬度是設備寬度而不是100％。標題大部分都適用，但只要元素顯示/隱藏，它就會中斷。 – mirhagk

基本上使用HTML5制定的標準，文檔將伸展以適應內容，並且使內容成爲主體的百分比意味着什麼，因爲文檔已經拉伸以適應內容。

通過明確地說html, body {height:100%}你可以告訴瀏覽器未調整的文檔，然後將其指定基於百分比才有意義。

（感謝@Pete和@ t.niese誰提供答案，而只是在註釋中這樣做）

來源

2013-06-19 23:53:41 mirhagk

<！DOCTYPE HTML>引起的頁眉和頁腳打破

回答

相關問題