html - 当 ui :insert is used 时使页脚贴在页面底部

标签 html css sticky-footer

你好,我有一个这样的主页。

html View

<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 View 结束

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 结束

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

最佳答案

如果您希望页脚始终占据页面底部,我认为在页脚之前包装 div 类(带有您为其提供的 css)是一种建议的解决方案。

至于您的问题,默认情况下 div 类是彼此重叠的,除非指定了 float 或 inline-block。所以如果你删除:

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

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

关于html - 当 ui :insert is used 时使页脚贴在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10478144/

相关文章:

javascript - 在 tampermonkey 中,变量 urlm 的行为有所不同

html - Fontawesome HTML 和 CSS 社交图标

html - visNetwork 中的多行标题

html - 包装高度有问题

php - 如何将输入的文本转换为图像?

html - 带有额外元素的 CSS 粘性页脚

javascript - WebGL 中的索引缓冲区?

css - 移动网站 : static map width and height. 可以为每个设备动态设置吗?

html - 页脚位置固定在页面底部

html - 底部位置页脚抑制了主要内容的正常滚动行为