固定頁腳不滾動內容下推

固定頭（內容應根據它向上滾動）
固定的100％高度欄（左菜單）
內容區域
頁腳該A.堅持底部，如果內容是短暫的，或者，B.下推具有較長內容（關閉屏幕）

我已經設法得到1,2,3和4 A.工作。但是我不能讓頁腳被較長的內容壓低。我基於我的初始工作在CSS重置（例如：http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/），但是，我假設我的固定標題和左列沒有幫助。

我真的很感謝任何關於如何克服這個問題的建議。

這裏是我的代碼：

<!DOCTYPE html> 
<head> 
<meta charset="UTF-8" /> 
<title>Layout</title> 

<style type="text/css"> 

html, 
body { height: 100%; padding:0;margin:0; } 

#sc_admin_wrapper { 
min-height:100%; 
position:relative; 
background:#fff; 
margin: 0; 
} 
#sc_admin_header{ 
width:100%; 
height:50px; 
position:fixed; 
top:0; 
background: #212121; 
z-index:9995; 
color:#fff; 
} 

#sc_admin_logo { 
width:20%; 
float: left; 
} 

#sc_admin_menu { 
position:fixed; 
top:50px; 
bottom:0; 
float:left; 
width: 20%; 
margin: 0; 
background: #3d3d3d; 
color: #fff; 
} 
#sc_admin_content { 
float: left; 
margin:50px 0 0 20%; 
width: 77%; 
padding: 0.5% 1.5% 30px 1.5%; 
} 
#sc_admin_footer { 
background: #ffcc00; 
width: 77%; 
height: 30px; 
position:absolute; 
bottom:0; 
left:0; 
margin: 0px 0 0 20%; 
padding: 0 1.5% 0 1.5%; 
} 
</style> 

</head> 
<body> 

<div id="sc_admin_wrapper"> 

<div id="sc_admin_header"> 
    <div id="sc_admin_logo"><h1>Fixed header</h1></div> 
    <div class="clear"></div> 
</div> 

<!--/#sc_admin_header --> 

<div id="sc_admin_menu"> 
    <p>Fixed height column at 100%;</p> 
    <div class="clear"></div> 
</div> 

<!--/#sc_admin_menu --> 

<div id ="sc_admin_content"> 

    <div id="sc_msgs"></div> 

    <p>This would be my short or long content.</p> 

    <p>I should scroll under the header.</p> 

    <p>My footer should be fixed at the bottom of the screen if content is 
    short, or, scroll should the content be longer.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>          

    <div class="clear"></div> 

</div> 

<!--/#sc_admin_content --> 

<div id="sc_admin_footer"> 
    This is my fixed footer  
    <div class="clear"></div> 
</div> 
<!--/#sc_admin_footer --> 
</div> 
<!--/#sc_admin_wrapper --> 
</body> 
</html>

來源

2013-07-18 Bernie Davies

嗯，我想你幾乎是正確的！你只是錯過了一些CSS /結構細節。您需要添加一個樣式定義爲.clear類，如下所示：

.clear{ 
    clear:both; 
}

然後，你需要將.clear div元素在.sc_admin_content出它的底部移動，使其.sc_admin_content和.sc_admin_footer間位於。

這是一個JSFiddle example這將是什麼，然後看起來像。（嘗試刪除內容並按下「運行」，並查看頁腳停留在底部！）如果這不是您要查找的內容，請告訴我，我很樂意進一步提供幫助。祝你好運！

來源

2013-07-18 21:57:27 Serlite

Serlite，我在本地確實有清楚的課程（我放棄了所有外來的口語，這樣我的問題就更清楚了）。我只是在錯誤的地方有一個div！非常感謝您的清晰，簡潔的答覆 - 非常感謝。我花了太長時間盯着它！謝謝。 –

太棒了！很高興我能幫助你。 – Serlite

用四顆Z-層在你的代碼：

在頂部，把你的文字與不透明的背景。

在下面的圖層中，在其類中使用position: fixed;放置一個頁腳副本。

在下面的圖層中，有一個height: 100%; width: 100%的div，它是不透明的（即，與您的文本具有相同的背景色），並在滾動時與您的文本一起移動。

在下面的圖層中，放置另一個頁腳副本，該副本將隨滾動文本一起移動。

這些元素的z順序可能不會產生確切的效果，但它應該指向正確的方向。

來源

2013-07-18 18:56:53 abiessu

謝謝你的答覆abiessu，但我認爲你會同意接受的解決方案。 –

固定頁腳不滾動內容下推

回答

相關問題