HTML5：footer定位（底部+居中）的探讨+div图片居中问题

2024-07-17 17:06| 来源: 网络整理| 查看: 265

学HTML+CSS布局，尝试自己写一个百度首页，但是footer的定位遇到麻烦并且百度没有好的解决方法，在此记录下逐步的过程。记录之，备忘。

初学，解决方法难免出现不妥之处，也请看到这篇文章的前辈指点一二，在此先谢过。

首先是设置为

[css] view plain copy footer{ clear: both; display: block; position: absolute; bottom: 100px; } 时效果为：确实绝对定位到了底部，但是由于是绝对定位，使用

[html] view plain copy footer{ clear: both; display: block; text-align: center; margin: 0px auto; position: absolute; bottom: 100px; } 并没有居中的效果，想想这应该是footer的宽度设置问题，设置宽度width之后果断有效果，考虑到不同尺寸显示器的兼容性问题，那么可以调用JS动态设置width值，代码如下：

[javascript] view plain copy var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("footer").style.width=w + "px"; 居中底部都搞定了，出现以下问题：

问题1、

缩小水平方向的窗口，那么以上设置等于0，窗口改变后，不会随窗口变化而变化，也就是不再是当前显示的有效窗口居中，出现了滚动条；

问题2、

缩小垂直方向的窗口，同样的，出现以下情况，也就是和页面中间部分重叠！

水平居中怎么实现呢？其实很简单！设置为width: 100%;

[css] view plain copy footer{ clear: both; display: block; text-align: center; margin: 0px auto; position: absolute; bottom: 100px; width: 100%; }

到此水平居中搞定，也就不用傻不拉几的写脚本了！

新问题问题3：

垂直方向上移的问题可以通过设置top值来解决。但是设置top后bottom就无用了（逻辑上这个肯定冲突，设置了top已经定位了，又设置了bottom，那么浏览器听谁的？同理left和right也存在悖论），具体的可以试一下，那怎么办呢？

问题的根源在于使用绝对定位和设置bottom时，footer是跟随浏览器窗口变化而变化的，那我们要做的就是打破这种格局。

解决思路1、当界面上下伸缩时，动态调整css样式即可：具体为当达到某一位置时，使用buttom定位，当超过这个位置时，使用top定位，这样就可以保证，缩小到某一个值时距离顶部距离不变，放大到超过这个值时，距离底部不变。具体实现如下代码：

[html] view plain copy 百度一下，你就知道 function myFunc() { var winHeight=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; if (parseInt(winHeight) 把百度设为主页关于百度 About Baidu ©2014 Baidu 使用百度前必读京ICP证030173号 Written by The_Third_Wave CSS为 [css] view plain copy body{ background-color: #FFFFFF; margin: 0px auto; padding: 0px; } nav{ display: block; width: 400px; height: 100px; float: right; } nav a { float: right; display: inline-block; padding: 15px; color: black; font-weight: bold; } #mid{ position: relative; top: 100px; width: 100%; min-width: 610px; /* 保证图片和输入框绝对居中 */ height: 200px; text-align: center; /* 只对input有效，图片无效 */ float: left; padding-bottom: 100px; /*重要！给footer预留的空间*/ } img{ display: block; width: 270px; height: 129px; margin: 0px auto; } #logo{ margin-bottom: 20px; /* 保证图片和输入框的间距 */ } #input{ display: block; width:100%; min-width: 610px; /* 保证子节点两个input不换行 */ height: 40px; padding: 0px; } #inputtext{ width: 520px; height: 22px; margin-right: 0px; padding: 6px 0px 5px 0px; font: 16px/22px arial; border: 1px #CECABC solid; /*默认边框色为灰色*/ } #button{ display: inline-block; width: 80px; height: 35px; font: 16px/22px arial; margin: 0px 0px 0px -6px; padding: 5px 0px 5px 0px; background-color: blue; border: 1px blue solid; } footer { /*border: 1px red solid;*/ clear: both; display: block; text-align: center; width: 100%; height: 120px; min-width: 610px; /* 保证文字inline-block效果时不换行 */ } .dAdjustButtom{ position: absolute; bottom: 100px; } .dAdjustTop{ position: absolute; top: 530px; /* 750-120-100 JS中tag-footer的height-mid的padding-bottom*/ } 代码解析，利用onresize事件，动态设置CSS，我使用class值的改变来达到目的，具体请看JS代码。

解决思路2、我们让他随内容变化，当内容撑不满屏幕时，我们固定footer在底部，在屏幕装不下内容时，我们要保证footer看不见了，也就是拖动页面到最底部时才出现！即做到永远固定于页面底部！怎么做？

这里有篇不错的文章，点击打开参考：如何将页脚固定在页面底部

问题4、

图片在div中怎么居中，直接上代码：

[html] view plain copy [css] view plain copy #mid{ position: relative; top: 100px; width: 100%; min-width: 610px; /* 保证图片和输入框绝对居中 */ height: 200px; text-align: center; /* 只对input有效，图片无效 */ float: left; } img{ display: block; width: 270px; height: 129px; margin: 0px auto; } #logo{ margin-bottom: 20px; /* 保证图片和输入框的间距 */ } #input{ display: block; width:100%; min-width: 610px; /* 保证子节点两个input不换行 */ height: 40px; padding: 0px; } #inputtext{ width: 520px; height: 22px; margin-right: 0px; padding: 6px 0px 5px 0px; font: 16px/22px arial; border: 1px #CECABC solid; /*默认边框色为灰色*/ } #button{ display: inline-block; width: 80px; height: 35px; font: 16px/22px arial; margin: 0px 0px 0px -6px; padding: 5px 0px 5px 0px; background-color: blue; border: 1px blue solid; }

总结：

1、水平居中可以使用width: 100%和text-align: center;来搞定；

2、垂直居中并实现动态变化可以使用onresize事件+js动态设置布局（position: absolute; 以及top/bottom）来实现；

3、图片在div中居中设置：使用margin: 0px auto;

4、怎么保证左右拉伸时图片和输入框的绝对居中效果不变，设置最小宽度min-width的值一致即可！其他使用了display: inline-block的元素同理；

本文由@The_Third_Wave（Blog地址：http://blog.csdn.net/zhanh1218）原创。还有未涉及的，会不定期更新，有错误请指正。

如果你看到这篇博文时发现不完整，那是我为防止爬虫先发布一半的原因，请看原作者Blog。

如果这篇博文对您有帮助，为了好的网络环境，不建议转载，建议收藏！如果您一定要转载，请带上后缀和本文地址。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章