HTML5：footer定位（底部+居中）的探讨+div图片居中问题 |
您所在的位置：网站首页 › dw文字本居中代码 › HTML5：footer定位（底部+居中）的探讨+div图片居中问题 |
HTML5：footer定位（底部+居中）的探讨+div图片居中问题
|
学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，窗口改变后，不会随窗口变化而变化，也就是不再是当前显示的有效窗口居中，出现了滚动条； 缩小垂直方向的窗口，同样的，出现以下情况，也就是和页面中间部分重叠！ 水平居中怎么实现呢？其实很简单！设置为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) |
【本文地址】
今日新闻 |
推荐新闻 |