初学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 ...

随机推荐

基于redis的cas集群配置(转)
1.cas ticket统一存储做cas集群首先需要将ticket拿出来,做统一存储,以便每个节点访问到的数据一致.官方提供基于memcached的方案,由于项目需要,需要做计入redis,根据官方 ...
Linux环境下使用eclipse开发C++动态链接库程序
Linux中也有类似windows中DLL的变成方法,只不过名称不同而已.在Linux中,动态链接叫做Standard Object,生成的动态链接文件为*.so.详细请参考相关文档. 开发环境:Ec ...
UVALive 2519 Radar Installation 雷达扫描区间选点问题
题意:在坐标轴中给出n个岛屿的坐标,以及雷达的扫描距离,要求在y=0线上放尽量少的雷达能够覆盖全部岛屿. 很明显的区间选点问题. 代码: /* * Author: illuz <iilluzen ...
远光软件ASP.NET笔试题小汇总
ASP.NET笔试题是ASP.NET程序员面试必须经历的,一般会叫你填两个表 1个是你的详细信息表 1个是面试题答卷两个都要注意反正面是否都有内容不要遗漏,如果考你机试一般也有两种,就是程序连接数据 ...
Thinkphp入门一（45）
原文:Thinkphp入门一 (45) 什么是框架? 就是一堆代码的集合,这些代码可以有变量.常量.函数.类等等.这些代码彼此紧密联系,彼此有合作关系.里边还有设计模式:MVC.单例.工厂等等. 为 ...
高斯消元法~get√
高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵.高斯消元法的原理是:若用初等行变换将增广矩阵化为 ,则AX = B与CX = D是同解方程组. ...
cocos2d-x游戏开发系列教程-编译运行我们的第一个cocos2d-x游戏程序
环境准备和介绍: 操作系统:64位Windows 7 sp1(Microsoft Windows [版本 6.1.7601]) 必要的软件和源码: visual_studio_ultimate_201 ...
不使用webview,用手机浏览器的android app
需求:wap站在手机上以App的形式打开,但不要嵌套WebView,只能以浏览器打开 package com.gzz.whyinzi; import android.net.Uri; import a ...
Swift - 设置UIView的背景色和背景图片
1,使用UIColor的内置颜色设置背景色 1 2 var page = UIView() page.backgroundColor = UIColor.greenColor() 2,设置自定义颜色 ...
ios html5 设定PhoneGap开发环境
怎么样IOS平台搭建PhoneGap开发环境(PhoneGap2.5) (2013-03-13 14:44:51) 标签: c=blog&q=it&by=tag" targe ...

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