固定页脚不被滚动内容向下推答案

【问题标题】：Fixed footer not pushed down by scroll content固定页脚不被滚动内容向下推
【发布时间】：2023-03-22 23:45:01
【问题描述】：

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

固定标题（内容应在其下方向上滚动）
固定 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>

【问题讨论】：

标签： html css footer fixed

【解决方案1】：

嗯，我想你几乎是对的！你只是错过了几个 CSS/结构细节。需要为.clear类添加样式定义，如下：

.clear{
    clear:both;
}

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

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

【讨论】：

Serlite，我在本地的源代码中确实有 clear 类（我放弃了所有无关的废话，以便我的问题更清楚）。我只是把那个 div 放错了地方！非常感谢您清晰、简洁的回复 - 非常感谢。我花了太长时间盯着它！谢谢。
太棒了！很高兴能帮到你。

【解决方案2】：

在您的代码中使用四个 z 层：

在顶部，使用不透明背景放置文本。

在它下面的层中，使用position: fixed; 在其类中放置一份页脚副本。

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

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

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

【讨论】：

感谢您的回复 abiessu，尽管我认为您会同意接受的解决方案。