初学HTML+CSS布局，尝试自己写一个百度首页，但是footer的定位遇到麻烦并且百度没有好的解决方法，在此记录下逐步的过程。记录之，备忘。
初学，解决方法难免出现不妥之处，也请看到这篇文章的前辈指点一二，在此先谢过。
首先是设置为
我要评论footer{
clear: both;
display: block;
position: absolute;
bottom: 100px;
}
时效果为：确实绝对定位到了底部，但是由于是绝对定位，使用
footer{
clear: both;
display: block;
text-align: center;
margin: 0px auto;
position: absolute;
bottom: 100px;
}并没有居中的效果，想想这应该是footer的宽度设置问题，设置宽度width之后果断有效果，考虑到不同尺寸显示器的兼容性问题，那么可以调用JS动态设置width值，代码如下：
<script>
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";
</script> 居中底部都搞定了，出现以下问题：
缩小水平方向的窗口，那么以上设置等于0，窗口改变后，不会随窗口变化而变化，也就是不再是当前显示的有效窗口居中，出现了滚动条；
vc/ytcS0sL/ao6zNrNH5tcSjrLP2z9bS1M/Cx+m/9qOs0rK+zcrHus3Ss8Pm1tC85LK/t9bW2LX+o6E8L3A+CjxwPjxpbWcgc3JjPQ=="/uploadfile/Collfiles/20141027/20141027084913129.png" alt="\">
水平居中怎么实现呢？其实很简单！设置为width: 100%;
footer{
clear: both;
display: block;
text-align: center;
margin: 0px auto;
position: absolute;
bottom: 100px;
width: 100%;
}
到此水平居中搞定，也就不用傻不拉几的写脚本了！
垂直方向上移的问题可以通过设置top值来解决。但是设置top后bottom就无用了（逻辑上这个肯定冲突，设置了top已经定位了，又设置了bottom，那么浏览器听谁的？同理left和right也存在悖论），具体的可以试一下，那怎么办呢？
问题的根源在于使用绝对定位和设置bottom时，footer是跟随浏览器窗口变化而变化的，那我们要做的就是打破这种格局。
解决思路1、当界面上下伸缩时，动态调整css样式即可：具体为当达到某一位置时，使用buttom定位，当超过这个位置时，使用top定位，这样就可以保证，缩小到某一个值时距离顶部距离不变，放大到超过这个值时，距离底部不变。具体实现如下代码：
百度一下，你就知道
<script>
function myFunc() {
//获取窗口高度
if (window.innerHeight)
winHeight=window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight=document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight &&
document.documentElement.clientWidth)
{
winHeight=document.documentElement.clientHeight;
}
if (parseInt(winHeight)
新闻
hao123
地图
视频
贴吧
-->
把百度设为主页
关于百度
About Baidu
©2014 Baidu
使用百度前必读
京ICP证030173号
Written by The_Third_Wave
CSS为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看不见了，也就是拖动页面到最底部时才出现！即做到永远固定于页面底部！怎么做？
这里有篇不错的文章，点击打开参考：如何将页脚固定在页面底部
图片在p中怎么居中，直接上代码：
-->
#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、 图片在p中居中设置：使用margin: 0px auto;
4、怎么保证左右拉伸时图片和输入框的绝对居中效果不变，设置最小宽度min-width的值一致即可！其他使用了display: inline-block的元素同理；
本文由@The_Third_Wave（Blog地址：http://blog.csdn.net/zhanh1218）原创。还有未涉及的，会不定期更新，有错误请指正。
如果你看到这篇博文时发现不完整，那是我为防止爬虫先发布一半的原因，请看原作者Blog。
如果这篇博文对您有帮助，为了好的网络环境，不建议转载，建议收藏！如果您一定要转载，请带上后缀和本文地址。
如对本文有疑问， 点击进行留言回复！！
网友评论