體不包含的內容/連同加權頁腳

http://jsfiddle.net/sheriffderek/y7fPK/1/

html, body { 
height: 100%; 
} 

.page-wrapper { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
}

和緩衝和頁腳...小提琴會更有意義。

粘性頁腳運行良好，但滾動時不會擴展包含內容。

enter image description here

VS. （向下滾動時）

看到這個橙色？紅色是身體，HTML是橙色......它沒有穿過視圖端口。如果我從身體移除高度：100％，這解決了這個問題 - 但是然後頁腳跳到內容的末尾。看起來100％的高度只是視角。這是有道理的......但我希望身體像HTML一樣大...任何想法？

謝謝你的時間。

來源

2012-10-23 sheriffderek

你撥弄工作正常。你能發表一個你描述的情況發生的例子嗎？ –

如果您將小提琴視口縮小，然後將內容區域向下滾動，您將看到粉紅色的背景，顯示身體未填充html。謝謝。 – sheriffderek

實際上，如果您使用Chrome的開發人員工具等工具，則會看到body元素*會填充HTML。問題是HTML元素不適合頁面。（粉紅色背景顏色在根文檔元素上設置，而不是在這種情況下的HTML。） –

隱藏在包裝上的一個簡單的溢出似乎爲我做了詭計。

這是一支鋼筆。

http://codepen.io/sheriffderek/pen/DiewF

HTML：

<html><body> 

    <div class="wrapper"> 

     <header> 
      HEADER 
     </header> 

     <section class="main-content"> 
      MAIN CONTENT 
     </section> <!-- end .main-content --> 

     <div class="footer-buffer">BUFFER</div> 

    </div><!-- end .wrapper --> 

    <footer> 
     FOOTER 
    </footer> 

</body></html>

CSS：

html, body { 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    height: auto !important; /* for IE 6 */ 
    height: 100%; /* for IE 6 */ 
    margin: 0 auto -4em; 

    /* new addition */ 
    overflow: hidden; /* this seems to do the trick */ 
    /* remove this to see the problem */ 
} 

footer, .footer-buffer { 
    height: 4em; 
}

來源

2013-02-12 22:09:56 sheriffderek

體不包含的內容/連同加權頁腳

回答

相關問題