CSS粘滯頁腳內容時不佔用

整個頁面

我，只有包含在內容盒 div標籤的內容不同的兩個頁面。你可以在這裏看到他們：CSS粘滯頁腳內容時不佔用

我已經包含了以下短版本的HTML/CSS代碼。我想有短版本顯示，這樣，如果內容的量不會填滿整個頁面，頁腳仍然堅持底部和頭部，並在屏幕中間頁腳之間的整個區域是對應於內容框 div的白色。

什麼我需要改變，以實現這一目標？\

更新1我提出做@smallworld提出什麼新的一頁。可以看到here。這有一個粘性頁腳，但我希望外面的「容器」框來擴展頁面的高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> 
    <html lang="en"> 
     <head> 
      <meta http-equiv="Content-Type" content= 
      "text/html; charset=us-ascii"> 
      <style type="text/css"> 


       #main { 
        width: 100%; 
        min-height: 100%; 
        height: 100%; 
       } 

       body { 
        width: 100%; 
       } 


       #header,#content { position:relative; right:0;left:0} 

       #header{ 
        height:75px; top:0; 
        background: #4396CA; 
       } 
       #footer{ 
        width: 100%; 
        position: relative; 
        height:50px; 
        bottom: 0; 
        left: 0; 
        background: #4396CA; 
       } 
       #content{ 
        top:00px; 
        background: #F0F8FF; 
        min-height: 100%; 
        height: 100%; 
       } 

       #content-box { 
        width: 950px; 
        margin: 0 auto; 
        background-color: #FFFFFF; 
        text-align: left; 
        border-right: 1px solid #B0B0B0; 
        border-left: 1px solid #B0B0B0; 
        padding-bottom: 20px; 
        padding-top: 20px; 
        min-height: 100%; 
        height: 100%; 
       } 

      </style> 
      <title>EmbeddedAnalytics - Test Page</title> 
     </head> 
     <body> 
      <div id="main"> 
       <div id="header">this is header</div> 
       <div id="content"> 
        <div id="content-box"> 
         <b>Content does not take up all of box. But still want footer to "stick" to bottom</b><br> 
         line1<br> 
         line2<br> 
         line3<br> 
         Last Line<br></div> 
       </div> 
       <div id="footer">footer</div> 
      </div> 
     </body> 
    </html>

來源

2013-05-30 M Schenkel

[這就是你想要的東西（http://stackoverflow.com/questions/12341415/content-container-to-fit-screensize/ 12342330＃12342330）？ –

是的 - 我搜索了「粘腳」，但顯然沒有正確地做某件事。 –

下面是我基於它關閉的頁面：http://www.pud.ca/misc/testcase/fullheight.html我想使這是一個比較複雜一點的是「內容」中的「內容框」。我見過的大多數粘性示例都是基本的，只有三個塊：標題，內容，頁腳。 –

編輯：在http://jsfiddle.net/smallworld/gcpNh/見的jsfiddle - 我已經使用類= 「XYZ」，而不是在你的例子使用ID = 「XYZ」。我知道，伸展到100％的高度不應該那麼困難和緊張，但事實上，這是事實。我感到你的痛苦，這就是爲什麼盡我所能幫助。我做了一次更正 - 它應該是填充底部的，而不是「主」類的底邊。

CSS：

html { height:100%;min-height:100% !important;margin:0;padding:0; /** see height, min-height values here. **/ } 
body{ overflow:auto;padding:0;margin:0;height:100%;min-height:100% !important; /** see height, min-height values here. **/ } 
.main { 
    position:relative;min-height:100%; height:auto; background:cyan; 
    /** see position, height, min-height values here. Height auto to make sure 
     that main div resizes if window size changes after initial rendering **/ 
} 
.header { display:block;height:50px;position:relative;background:yellow;text-align:center;padding:10px; } 
.content { padding:20px;margin-bottom:50px; /** bottom margin here to make sure that footer does not cover the content area **/ } 
.footer { display:block;position:absolute;bottom:0;left:0;width:100%;height:50px;background:red;color:white;text-align:center;padding:10px; /** see position, top, left, and width properties here. **/ }

HTML

<div class="main clearfix"> 
    <div class="header">header</div> 
    <div class="clearfix content"> 
     <h1>Goal of this fiddle is to demonstrate sticky footer implementation</h1> 
     And domonstrate this with least amount of CSS and HTML, without using any extraordinary hacks. 
     <p>Your content goes in here. Add lot more content, and resize browser window to several different sizes to see how your page is rendered as compared to with very little content.</p> 
    </div>   
    <div class="footer">footer</div> 
</div>

來源

2013-05-30 03:02:22 smallworld

請參閱**更新1 ** –

@MSchenkel - 不，您尚未提出建議的更改。檢查你的DOCTYPE，body元素沒有指定高度，最小高度。你需要閱讀和實現所有建議的子彈（它儘可能短而且甜美）。說真的，如果你需要幫助，請進行一些認真的努力。否則，我不會（除非我在提問之前看到絕對沒有努力），但其他許多人會投你的問題。 – smallworld

抱歉。沒想到DOCTYPE會有區別（事實並非如此）。我修改了身體標記以具有高度和最小高度。否則，其他更改已經完成。現在看看http://embeddedanalytics.com/eashort1。html - 我希望外部淡藍色容器可以延伸頁面的整個長度。相信我 - 我已經付出了很多努力。造成困難的是我必須更改其他示例以適應嵌套的容器盒。 –

CSS粘滯頁腳內容時不佔用

回答

相關問題