使用 ui:insert 时使页脚粘在页面底部答案

【问题标题】：making footer to stick at the bottom of the page when ui:insert is used使用 ui:insert 时使页脚粘在页面底部
【发布时间】：2012-05-15 17:29:02
【问题描述】：

嗨，我有一个这样的主页。

html 视图

<html>   

<head>  

</head>  

<body>  

<div class="wrapper">  

<div class="content">  

<ui:include src="/templates/include/header.xhtml"/>  

<div class="left_menu">  

<ui:include src= />  

</div>  

<div class="content_container">  

<ui:insert name="body">Body</ui:insert>  

</div>      

</div>  

<div class="footersathi">  

<ui:insert name="footer">footer</ui:insert>  

</div>  

</div>      

</body>  

</html>

html 视图结束

css

.wrapper {  
min-height:100%;
position:relative;
     }

.content {
margin:0;
padding-bottom:20px;
}

.left_menu {
position: absolute;
top: 0px;
left: 0px;
}

.content_container {
position: absolute;
top: 176px;
left: -15px;
}

.footersathi {
width:100%;
height:20px;
position:absolute;
bottom:0;
left:0;
background:blue;
}

css 结束

问题是因为 iam 使用 ui:insert name=body 标签 iam 包含名称正文的页面有些页面内容较少，有些页面内容较多，但页脚相对于该标签没有变化内容，而不是固定到特定位置，任何人都可以帮助我在使用 ui:insert 时如何解决这个问题。

【问题讨论】：

标签： html css sticky-footer

【解决方案1】：

页脚之前的包装 div 类（带有您为其提供的 css）是我认为当您希望页脚始终占据页面底部时提出的解决方案。

至于您的问题，除非指定了 float 或 inline-block，否则 div 类默认情况下是相互重叠的。所以如果你删除：

position:absolute;
bottom:0;
left:0;

正如 Wesley 所解释的，您的布局应该没问题。

【讨论】：

如果你想要让页脚粘在页面底部，请按照这个：ryanfait.com/resources/footer-stick-to-bottom-of-page
谢谢 Edwin 实际上真正的问题在于 position:absolute。非常感谢

【解决方案2】：

为什么要在页脚使用position: absolute;？如果您设置position: static'（如果您不指定，则为默认值），页脚将自动出现在文档末尾。..

如果这不能回答你的问题，请让你的问题更清楚:)

对于您想要的，我认为您可以避免将元素定位在正常流程之外。查看 here 示例，了解如何使用 CSS 创建布局。

【讨论】：

您好 Wesley，感谢您的回复。当我将位置：绝对更改为位置：静态时，页脚将出现在页面顶部。我上面写的 HTML 代码是一个模板，它会包含不同的页面，使用这个语句这个语句是所有页面通用的，但是语句 Body 不同，我会使用语句，我会在这里写内容。
这是上述评论的延续问题是我的页面内容低，内容高，内容低页脚工作正常，但内容高，页脚粘在页面中间而不是页面底部。
页脚出现在顶部的原因是因为其他元素是绝对定位的并且被排除在流之外。您应该尽可能避免定位，让 HTML 顺其自然。在这种情况下，请尝试从 content_container 中删除定位。例如，这应该将内容放在页脚的顶部。
谢谢 Wesley 实际上真正的问题在于 position:absolute。非常感谢
不客气。您可能想接受其中一个答案来结束这个问题:)