內容100％的頁腳固定在底部

我試圖創建一個頁腳固定在底部的模板。我已經成功地嘗試了不同的方法，但現在我發現無法以100％的高度擴展次要內容div。我曾嘗試瑞恩法特，大衛沃爾什和搜索其他方法。我知道這是一個常見的問題，但在stackoverflow我還沒有看到一個解決方案。內容100％的頁腳固定在底部

這裏你可以看到一個例子：http://jsfiddle.net/charlyta/hyfUe/

* { 
     margin: 0; 
     padding: 0; 
     } 

    body, html { 
     height: 100%; 
     } 

    #container { 
     background: #f00; /* styling only */ 
     width: 100%; 
     margin: 0 auto; 
     position: relative; 
     height: auto !important; 
     min-height: 100%; 
     height: 100%; 



     } 

    #content { 
     padding-bottom: 100px; 
     width: 980px; 
     background-color: #FFF; 
     margin: 0 auto; 
     min-height: 100%; 
     margin-top: -20px; 
     -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44); 
     -moz-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44); 
     box-shadow:   0px 1px 3px rgba(27, 57, 50, 0.44); 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     position: relative; 
     max-height:100%; 
     height:auto !important; 
     height: 100%; 
     overflow: hidden; 

     } 

    #footer { 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     height: 100px; 
     width: 100%; 
     background: #0f0; 
     } 

     #header { 

     height: 100px; 
     width: 100%; 
     background: #0f0; 
     } 

</style>

<div id="container"> 
<div id="header"> 
header 
</div> 
    <div id="content"> 
     Your content goes here 
    </div> 
    <div id="footer"> 
     Footer here 
    </div>   
</div> 
</body>

來源

2012-11-07 user1723670

你想創建列或行嗎？ –

不，我不是想創建列或行，只是一個div 100％的高度：內容 – user1723670

你想讓div自動調整到內容的高度？那是對的嗎？ –

編輯：

重試此：

http://jsfiddle.net/hyfUe/12/

種

#container { 
     background: #f00; /* styling only */ 
     width: 100%; 
     margin: 0 auto; 
     /*position: relative;*/ 
     /*height: auto !important;*/ 
     /*min-height: 100%;*/ 
     height: calc(100% - 120px); /* MAGIC */ 
    } 

    #content { 
     border: 3px dashed silver; /* DEBUG */ 
     padding-bottom: 100px; 
     width: 980px; 
     background-color: #FFF; 
     /*margin: 0 auto; /* REMOVED */ 
     /*min-height: 100%; /* REMOVED */ 
     margin-top: -20px; 
     margin-bottom: 100px; 
     -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44); 
     -moz-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44); 
     box-shadow:   0px 1px 3px rgba(27, 57, 50, 0.44); 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     display: block; 
     height: calc(100% - 170px) !important; /* MAGIC */ 
     } 

    #footer { 
     opacity: 0.5; /* DEBUG */ 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     height: 100px; 
     width: 100%; 
     background: #0f0; 
     }

來源

2012-11-07 13:11:21

是的，我嘗試過，但你可以看到div溢出底部。這是主要問題，如果我把溢出：隱藏我的設計被切割 – user1723670

我已編輯，重試 –

完美的作品。謝謝你幫助我學習@Andrea – user1723670

在CSS

* { 
    margin: 0; 
    padding: 0; 
    } 

#container { 
    background: #f00; /* styling only */ 
    display:block; 
    margin: 0 auto; 
    min-height: 100%; 
    } 

#content { 
    padding-bottom: 100px; 
    width: 980px; 
    background-color: #FFF; 
    margin: 0 auto; 
    min-height: 100%; 
    margin-top: -20px; 
    -webkit-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44); 
    -moz-box-shadow: 0px 1px 3px rgba(27, 57, 50, 0.44); 
    box-shadow:   0px 1px 3px rgba(27, 57, 50, 0.44); 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    position: relative; 
    max-height:100%; 
    height:auto !important; 
    height: 100%; 
    overflow: hidden; 
    } 

#footer { 
    display:block; 
    position: fixed; /* here is where the magic happens =D */ 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
    background: #0f0; 
    } 

    #header { 

    height: 100px; 
    width: 100%; 
    background: #0f0; 
    }

一些變化，如果你要修復它在底部的頁腳不能是任何容器內，所以YOUT HTML應該是這樣的：

<div id="container"> 
    <div id="header"> 
    header 
    </div> 

    <div id="content"> 
     Your content goes here 
    </div> 
</div> 

<div id="footer"> 
    Footer here 
</div>

我想這是你想要的。

來源

2012-11-07 13:29:34

內容100％的頁腳固定在底部

回答

相關問題