瞭解html/body height屬性和粘性頁腳（不固定）

我一直在諮詢很多關於粘性頁腳的帖子（即使內容很少，頁腳仍然粘在頁面的底部）以及這些變通方法可以做的伎倆，我覺得他們有點混亂，不明白爲什麼簡單的事情不起作用。瞭解html/body height屬性和粘性頁腳（不固定）

這裏是我想要做的事：

<html> 
    <body> 
    <header></header> 
    <main></main> 
    <footer></footer> 
    </body> 
</html>

和

html { 
    height: auto; 
    min-height: 100% 
} 

body { 
    height: 100%; 
} 

main { 
    height: calc(100% - 50px - 50px); //container's height - (header height + footer height) 
} 

header, footer { 
    height: 50px; 
}

我有這個代碼的問題是，身體會不尊重height: 100%財產和只會環繞身體內容而不是擴展到其容器的100％，即html。
html標記正常工作，其最小高度是視口，如果內容大於視口，將會以height: auto;擴大。

爲什麼身體不能擴展到html高度的100％？
我試過我的代碼，它完美的作品，如果我設置html的高度像素值，身體將擴大到100％的HTML。但是如果html的高度是auto，它不會擴展。

我不能將html的高度設置爲100％（即使是tho，然後主體將擴大以填充html標籤），因爲當內容低於視口的100％時，html不會展開以包含內容，它只會溢出。

有什麼我失蹤了嗎？我該如何做這項工作？

編輯：
感謝您的所有有見地的答案和意見！
下面是做到這一點的最好方式，我能想出：

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

main { 
    min-height: calc(100% - 50px - 50px); //container's height - (header height + footer height) 
} 

header, footer { 
    height: 50px; 
}

這樣做會使main內容擴展內容是否大於視時間越長，或停留在頁面如果底部內容比視口短。
由於我的頁眉和頁腳具有相對位置，因此我將它們的高度減去main的最小高度，以便在沒有內容的情況下頁腳始終適合視口，而不觸發滾動條顯示。

唯一的缺點這種方法是main將從body和html元素溢出（因爲他們height: 100%是視口的高度，但它不影響頁面會呈現的方式，似乎是工作。

來源

2017-02-02 eloism

我認爲這裏的問題是'html'元素沒有明確的高度，所以'body'上的'height：100％;'規則沒有值作爲參考。我無法真正解釋爲什麼會發生這種情況的理論，但你可以[看看這裏]（http://codepen.io/ZaLiTHkA/pen/oBqPeP）來看看它的行動。 – ZaLiTHkA

這正是發生的情況。但是我無法找到解釋，也沒有解決這個問題。 Myabe使用JQuery動態調整html的高度？我不知道。 – eloism

我會建議不要使用jQuery;這是不必要的開銷，會導致你頭痛的道路。 CSS不僅能爲你處理這個問題。同時請記住，標記結構對這些要點有很大的影響，所以呃韓在這裏的答案應該是你特別感興趣的。 – ZaLiTHkA

將Main替換爲Section，它應該根據您的要求提供輸出。

DOM

<html> 
    <body> 
    <header>asdf</header> 
    <section>asdf</section> 
    <footer>asdf</footer> 
    </body> 
</html>

CSS

html { 
    height: auto; 
    min-height: 100% 
} 

body { 
    height: 100%; 
} 

section{ 
    height: calc(100% - 50px - 50px); 
} 

header, footer { 
    height: 50px; 
}

輸出

來源

2017-02-02 11:41:30 Sasidharan

感謝您的回答，但不幸的是，它給了我與'main'相同的結果：body不擴展到html的高度，並且只是環繞'section'。 – eloism

我剛剛添加了輸出。這是你需要完成的嗎？如果是的話，上面的代碼也應該爲你工作。 – Sasidharan

這確實是我想要做的！然而'html height：auto'似乎阻止了我的情況擴展。我會嘗試不同的事情，並在更新之前看看它是如何工作的。 – eloism

那麼，你的代碼在我的本地完美工作。但是，我知道這是大多數版本的瀏覽器的一般問題，html和body高度可能不正確。他們的行爲有時與您的方法不同。

你可以嘗試我的方法，我使用多年，並對結果滿意。我不試圖強制html和body高度。

HTML結構：

<html> 
    <body> 
     <div id="page"> 
      <header></header> 
      <main></main> 
     </div> 
     <footer></footer> 
    </body> 
</html>

而且風格是：

<style> 
header, footer { 
    height: 50px; 
} 

#page { 
    min-height:100%; 
} 

main { 
    padding-bottom:50px;/* This is related to the footer's height */ 
} 

footer { 
    margin-top: -50px;/* This is related to the footer's height */ 
} 
</style>

如果你想頁腳總是留在底部，即使網頁內容大於視域高，只需更換#page的min-height屬性與height如下：

#page { 
    height:100%; 
    overflow:auto; 
}

來源

2017-02-02 11:52:38

這是一種真正有效的解決方法，它將成爲我的備份解決方案。然而，我有點固執，並沒有準備好放棄這個html高度的問題哈哈。我只需要明白爲什麼它不起作用。謝謝！ – eloism

@eloism這就是精神！大聲笑，請讓我通知或張貼在這裏作爲答案，如果你弄明白了。我很想知道 –

事實上，經過幾次測試後，我想我可能已經找到了最簡單的方法來完成這個任務，我編輯了我的文章。還檢查GCyrillus的帖子，它做了類似的事情，但使滾動條出現在'main'而不是'body'周圍。對於一些網站（如我的）可能會很有趣。謝謝！ – eloism

<html> 
    <head> 
     <title>Stackoverflow</title> 
     <style> 
      header { 
       position: absolute; 
       right:0; 
       left:0; 
       top: 0; 
       background: yellow; 
       height: 50px; 
      } 
      main {  
       position: relative; 
       min-width: 100%; 
       margin-top: 50px; 
       height: 100vh; 
       background: green;} 
      footer { 
       position: fixed; 
       right:0; left:0; 
       bottom: 0; 
       background: blue; 
       height: 50px; 
      } 
     </style> 
    </head> 
    <body> 
     <header></header> 
     <main></main> 
     <footer></footer> 
    </body> 
</html>

來源

2017-02-02 13:18:57 omukiguy

你覺得flex？它需要非常litlle CSS

例如頁眉頁腳&固定：

html,body { 
 
    height:100%;/* % needs a value from parent to be calculated, except for html wich takes window for reference. If you skip html, then body's height is 100% of null .... */ 
 
    margin:0; 
 
} 
 

 
/* layout */ 
 
body { 
 
    display:flex; 
 
    flex-direction:column; 
 
    } 
 

 
main { 
 
    flex:1; 
 
    overflow:auto; 
 
    
 
    /* see me */ 
 
    box-shadow:inset 0 0 0 1px; 
 
    }

<header>Any<br/> height </header> 
 
    <main> whatever, <br/>i'll be showing a scrollbr instead pushing against footer.</main> 
 
    <footer> any height</footer>

頁腳固定：

html,body { 
 
    height:100%;/* % needs a value from parent to be calculated, except for html wich takes window for reference. If you skip html, then body's height is 100% of null .... */ 
 
    margin:0; 
 
} 
 

 
/* layout */ 
 
body { 
 
    display:flex; 
 
    flex-direction:column; 
 
    } 
 

 
section { 
 
    flex:1; 
 
    overflow:auto; 
 
    
 
    /* see me */ 
 
    box-shadow:inset 0 0 0 1px; 
 
    }

<section> 
 
    <header>header</header> 
 
    <main>and the rest </main> 
 
    </section> 
 
    <footer> any height footer remaining at window bottom</footer>

來源

2017-02-02 13:23:39

謝謝你的回答，這是一個有趣的解決方法。這種方法的唯一缺陷是，頁眉和頁腳在向上或向下滾動時最終被修復：/ – eloism

@eloism如果將標題和主要放在一起，那麼只有頁腳保持可見。 *添加一個片段，以顯示這種技術是多麼容易* –

瞭解html/body height屬性和粘性頁腳（不固定）

回答

相關問題