Question

我有一个这样的主页。

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时。

Answer 1

为什么在页脚上使用position: absolute;？如果您设置position: static'（如果您没有指定它，则默认为此选项），页脚将自动显示在文档的末尾..

如果这不能回答您的问题，请让您的问题更清楚：）

对于你想要的，我认为你可以避免将元素定位在正常流量之外。查看示例here，以获取有关如何使用CSS创建布局的示例。

Answer 2

在页脚之前的包装器div类（使用你提供的css）我认为当你希望页脚总是占据页面底部时提出了一个解决方案。

至于你的问题，除非指定了float或inline-block，否则div类默认在彼此之上。所以，如果你删除：

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

正如韦斯利所解释的，你的布局应该没问题。

当使用ui：insert时，使页脚粘在页面底部

2 个答案: