我正在建立一个针对发展中国家的移动网站,这意味着大多数手机都是使用基本浏览器的老式功能手机,css支持有限且通常没有javascript。
我正在努力实现的一个目标是在旧版浏览器上支持的固定页脚解决方案。
通过这个网站,我找到了这个解决方案Ryan Fait Sticky Footer的链接,这个解决方案在理论上似乎很好,但是我无法开展工作。
这是我的jsfiddle,这是我对如何实现代码的理解。如果你能看一眼并让我知道我做错了什么(如果有的话),我将不胜感激
这是我的部分代码;
HTML代码
<body>
<div class="wrapper">
<p>Text</p>
<div class="push"></div>
<div class="footer">This is a test</div>
</body>
CSS
* {margin: 0;}
html, body {height: 100%;}
.wrapper {min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -155px;}
.footer, .push {height: 155px;}
答案 0 :(得分:2)
您尚未关闭包装器DIV。在页脚之前关闭它。看到新的小提琴。
请注意,这不会始终将页脚粘贴到窗口底部(您需要使用position: fixed
),如果页面不高则只在窗口底部足以将其推到那里,否则它将保留在内容的底部。