0

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

  1. 固定标题（内容应在其下方向上滚动）
  2. 固定 100% 高度列（左侧菜单）
  3. 内容区
  4. 如果内容很短，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>
4

2 回答 2

0

在代码中使用四个 z 层：

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

在它下面的图层中，将您的页脚副本position: fixed;放在其类中。

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

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

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

于 2013-07-18T18:56:53.580 回答
0

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

.clear{
    clear:both;
}

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

这是一个JSFiddle 示例，说明这会是什么样子。（尝试删除内容并按“运行”，然后看到页脚停留在底部！）如果这不是您要找的，请告诉我，我很乐意提供进一步的帮助。祝你好运！

于 2013-07-18T21:57:27.563 回答