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。窗体改变后。不会随窗体变化而变化，也就是不再是当前显示的有效窗体居中，出现了滚动栏。
问题2、
缩小垂直方向的窗体，相同的，出现下面情况，也就是和页面中间部分重叠。
水平居中怎么实现呢？事实上非常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。
假设这篇博文对您有帮助，为了好的网络环境。不建议转载，建议收藏！假设您一定要转载，请带上后缀和本文地址。
HTML5：footer定位（底部+居中）的探讨+div图片居中问题的更多相关文章
- 层居中绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器
详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...
- 文字和图片居中的HTML代码怎么写？
HTML 代码 ,怎么将文本/ 图片居中?这是在W3Cschool的编程问答中前端♌蕾儿提出的问题.网友施主同西否给出了详细的解答. html文字居中和html图片居中方法代码,通过在html中实现文 ...
- 网页布局中页面内容不足一屏时页脚footer固定底部
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
- CSS实现Footer固定底部，超过一屏自动撑开
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
- 绝对定位的DIV绝对居中显示
绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...
- HTML5图片居中的问题
刚开始接触html5,准备写一些网页,但是学习的过程中遇到了图片不能居中的问题,首先来看看,代码和执行效果: <!DOCTYPE html> <html> <head&g ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- css 如何使图片与文字在div中居中展示？
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- jQuery实现的浮动层div浏览器居中显示效果
本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...
随机推荐
- 安装bower
1.前提事先安装好node 和 npm D:\DEVELOP\HTML>node -v v0.10.29 D:\DEVELOP\HTML>npm -v 1.4.14 2.安装bower n ...
- 软考之路（四）---软件project一 概念模型，逻辑模型，物理模型
自从接触到数据库到如今这三个概念大家理解的还有些不清楚,今天来为大家解答疑惑,共同提高,结合生活理解 概念模型 概念模型就是在了解了用户的需求,用户的业务领域工作情况以后,经过分析和总结 ...
- 在程序异常中记录堆栈信息（使用ExWatcher）
在我们编写程序的时候可通过IDE自带的调试环境捕捉到异常(Except)错误,并能查看到相关的信息以便我们修正程序中的问题.但当软件被发布出去后,因为所部署运行的环境与我们的调试环境有很大区别,即使在 ...
- C#用正则表达式去掉Html中的script脚本和html标签
原文 C#用正则表达式去掉Html中的script脚本和html标签 /// <summary> /// 用正则表达式去掉Html中的script脚本和html标签 ...
- SDUT Fermat’s Chirstmas Theorem(素数筛)
Fermat's Chirstmas Theorem Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 In a letter ...
- 【分享】深入浅出WPF全系列教程及源码
本人10月份提出离职,可是交接非常慢,预计年底才会交接完,趁着交接之际,自学了一下WPF,由于这是微软未来的发展趋势,自WIN7以来包含前不久公布的WIN8,核心还是WPF,在此,将自己的学习成果做一 ...
- 页面提交错误,页面间参数传递java.lang.NumberFormatException: null
多次出现这样的错误,在点击一个按钮触发提交整个页面的事件时,总是报错,不止一次出现这样的错误了. 出现这种问题的分析: 1 我们从这个问题的本身来看,java.lang.NumberFormatExc ...
- 移动开发中的Scheme跳转说明——Allowing OtherApps to Start Your Activity
Allowing OtherApps to Start Your Activity 为了开发更多人使用的App,我们总希望我们的App能够提供一种接口被其他App调用.如我们常见的 大众点评 与 ...
- CocoaPods的install和update卡在“Anylyzing dependencies”的问题解决方式[效率]
问题 最新CocoaPod更新慢得问题,不管是运行pod install还是podupdate都卡在Anylyzing dependencies. 解决方式 事实上原因是运行两个命令时都会升级Coco ...
- CorePlot学习
阅读这篇文章,指出它在国外 原文地址:https://github.com/core-plot/core-plot/wiki/High-Level-Design-Overview 强烈推荐阅读该 ...