无论浏览器或设备如何，如何修复屏幕底部的页脚? [英] How to fix footer on bottom of screen, regardless of browser or device?

查看：37
本文介绍了无论浏览器或设备如何，如何修复屏幕底部的页脚?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道粘性页脚.但我的情况是我正在开发一个将在 PC & 上使用的网站.移动设备.因此，显示的页脚会根据屏幕宽度进行调整.

并且页脚的高度随着每个分辨率的变化而变化.

谁能知道我如何在页面底部(不是屏幕)显示页脚.部分页面高度小，页脚显示在页面之间.

我有以下结构:

<div style="height:100%;"><div id="wrapper" style="height:100%; max-width:800px;"><div id="标题">一些内容

<div id="内容">一些内容

<div id="footer" style="position:relative; width:100%;">一些内容

解决方案

这可能会澄清一些事情:

http://matthewjamestaylor.com/blog/保持页脚在页面底部

html,身体 {保证金:0;填充:0;高度:100%；}#容器 {最小高度:100%；位置:相对；}#header {背景:#ff0;填充:10px；}#身体 {填充:10px；填充底部:60px;/*页脚的高度*/}#页脚{位置:绝对；底部:0;宽度:100%；高度:60px；/*页脚的高度*/背景:#6cf;}

<div id="header"></div><div id="body"></div><div id="页脚"></div>

I know about sticky footer. But my situation is that I am developing a website that will be used on PC & mobile devices. Therefore, the footer displayed gets adjusted by width of the screen.

And footer's height gets changes on each resolution.

Can anyone have idea that how could I display footer on the bottom of the page(not screen). Some page's height is small, and footer gets displayed in between of page.

I have following structure:

<body style="height:100%;">
 <div style="height:100%;">
  <div id="wrapper" style="height:100%; max-width:800px;">
   <div id="header">
    some content
   </div>
   <div id="content">
    some content
   </div>
   <div id="footer" style="position:relative; width:100%;">
    some content
   </div>
  </div>
 </div>
</body>

解决方案

This might clear something up:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

这篇关于无论浏览器或设备如何，如何修复屏幕底部的页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆