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、

缩小垂直方向的窗口，同样的，出现以下情况，也就是和页面中间部分重叠！

水平居中怎么实现呢？其实很简单！设置为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() {
             //获取窗口高度
             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)<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。

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

时间： 2024-10-21 22:24:53

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

CSS div 图片居中

<style>.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width

HTML5 footer固定的解决方案

最近遇上个郁闷的事,前端妹纸离职去了驴妈妈旅游网,本来手里安卓和后端的活就来不及干,这下好了,前端离职,自己就得兼任前端,遇坑填坑吧. 妹纸也就刚毕业半年多,写的代码可维护性也不是特别好,妹子主要布局是没啥问题 <body> <header></header>//头 <article></article>//内容 <footer></footer>//尾 <div></div>//隐藏层,用于显示加

CSS实现Footer固定底部，超过一屏自动撑开

方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏(参考<div绝对居中.宽高自适应.多栏宽度自适应>),但是有了这两个,只能另寻他路,由于高版本浏览器对box-sizing的支持,我们可以在100%的高度中通过padding给header.footer空出两部分空白区域,再通过给header设置等同于自身高度的负值margin-bottom,给

HTML5移动开发之路（18）——HTML5地理定位

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(18)--HTML5地理定位 在前面的<HTML5移动开发之路(2)--HTML5的新特性>中介绍了关于HTML5的地理定位功能,这一篇我们来详细了解一下怎么使用该功能. HTML5 Geolocation API用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,在使用该功能的时候浏览器会弹出提醒框. 一.地理定位的几种方式 IP地址.GPS.Wifi.GS

HTML5 地理位置定位API（3）

HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了html5获取地理定位的方法,分享给大家供大家参考.具体方法如下: html5 获取坐标代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>test1.html</title> <meta

基于浏览器的HTML5地理定位

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo,获取浏览器经纬度,并用腾讯地图(大家可以选择自己喜欢的地图)显示出来,实现的最终效果如下图所示: 一.检测浏览器是否支持: if (navigator.geolocation) { //console.log("浏览器支持!"); } else

HTML5图片居中的问题

刚开始接触html5,准备写一些网页,但是学习的过程中遇到了图片不能居中的问题,首先来看看,代码和执行效果: <!DOCTYPE html><html> <head> <!-- 下面这行代码标定了编码方式,为了防止在某些浏览器中中文乱码的问题--> <meta charset="utf-8"> <title>图片居中问题</title> </head> <body> <im

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>