HTML5:footer定位(底部+居中)的探讨+div图片居中问题

初学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值,代码例如以下:

<!--动态改变footer的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>

居中底部都搞定了,出现下面问题:

问题1、

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

HTML5:footer定位(底部+居中)的探讨+div图片居中问题

问题2、

缩小垂直方向的窗体,相同的,出现下面情况,也就是和页面中间部分重叠。

HTML5:footer定位(底部+居中)的探讨+div图片居中问题

水平居中怎么实现呢?事实上非常easy!设置为width: 100%;

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定位,这样就能够保证。缩小到某一个值时距离顶部距离不变,放大到超过这个值时,距离底部不变。详细实现例如以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>百度一下,你就知道</title> <script>
function myFunc() {
var winHeight=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; if (parseInt(winHeight)<750){
document.getElementById("footer").setAttribute("class", "dAdjustTop");
/*document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");*/
} else {
document.getElementById("footer").setAttribute("class", "dAdjustButtom");
/*document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");*/
}
}
</script> </head> <body onload="myFunc() "onresize="myFunc()">
<nav>
<a href="http://news.baidu.com" target="_blank">新闻</a>
<a href="http://www.hao123.com" target="_blank">hao123</a>
<a href="http://map.baidu.com" target="_blank">地图</a>
<a href="http://v.baidu.com" target="_blank">视频</a>
<a href="http://tieba.baidu.com" target="_blank">贴吧</a>
</nav> <div id="mid">
<div id="logo">
<!--<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png">-->
<img src="images/bd_logo1.png">
</div>
<div id="input">
<input id="inputtext" value="" maxlength="100" autocomplete="off">
<input id="button" type="submit" value="百度一下">
</div>
</div> <footer id="footer">
<p>
<a href="http://www.baidu.com/cache/sethelp/index.html" target="_blank">把百度设为主页</a>
   
<a href="http://home.baidu.com">关于百度</a>
   
<a href="http://ir.baidu.com">About Baidu</a>
</p>
<p>
©2014 Baidu 
<a href="/duty/" name="tj_duty">使用百度前必读</a>
 京ICP证030173号 
</p>
<address>
Written by <a href="http://blog.csdn.net/zhanh1218">The_Third_Wave</a>
</address>
</footer>
</body> </html>

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看不见了,也就是拖动页面到最底部时才出现!

即做到永远固定于页面底部!

怎么做?

这里有篇不错的文章。点击打开參考:怎样将页脚固定在页面底部

问题4、

图片在div中怎么居中,直接上代码:

    <div id="mid">
<div id="logo">
<!--<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png">-->
<img src="images/bd_logo1.png">
</div>
<div id="input">
<input id="inputtext" value="111" maxlength="100" autocomplete="off">
<input id="button" type="submit" value="百度一下">
</div>
</div>
#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。

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

上一篇:CSS - 移动端 常见小bug整理与解决方法总结【更新中】


下一篇:ASP.NET 加入返回参数ReturnValue