Question

我正在处理具有以下属性的布局：

固定标题（内容应在其下滚动）
修正了100％高度栏（左侧菜单）
内容区域
如果内容很短，A会粘到底部的页脚，或者B.用较长的内容（屏幕外）推下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>

Answer 1

在代码中使用四个z层：

在顶部，将文字放在不透明的背景中。

在它下面的图层中，在其班级中使用position: fixed;放置一个页脚副本。

在下面的图层中，有一个height: 100%; width: 100%的div并且是不透明的（即，与文本具有相同的背景颜色）并在滚动时随文本一起移动。

在下面的图层中，放置您的页脚的另一个副本，它将与您的文本一起滚动。

这些元素的z顺序可能不会产生确切的效果，但它应该指向正确的方向。

Answer 2

嗯，我觉得你几乎把它弄好了！你刚刚错过了几个CSS /结构细节。您需要为.clear类添加样式定义，如下所示：

.clear{
    clear:both;
}

然后，您需要移动.clear底部的.sc_admin_content div元素，使其位于.sc_admin_content和.sc_admin_footer之间。

这是JSFiddle example的结果。（尝试删除内容并按“运行”，并看到页脚停留在底部！）如果这不是您想要的，请告诉我，我将很乐意进一步提供帮助。祝你好运！

固定页脚未被滚动内容向下推

2 个答案: