固定页脚不滚动内容下推

固定头（内容应根据它向上滚动）
固定的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，但我认为你会同意接受的解决方案。 –

固定页脚不滚动内容下推

回答

相关问题