欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-02 14:53:19
初学HTML+CSS布局,尝试自己写一个百度首页,但是footer的定位遇到麻烦并且百度没有好的解决方法,在此记录下逐步的过程。记录之,备忘。 初学,解决方法难免出现不妥之...

初学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>  
居中底部都搞定了,出现以下问题:

问题1、

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

HTML5:footer定位(底部+居中)的探讨+div图片居中问题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%;
}

到此水平居中搞定,也就不用傻不拉几的写脚本了!

新问题问题3:

垂直方向上移的问题可以通过设置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看不见了,也就是拖动页面到最底部时才出现!即做到永远固定于页面底部!怎么做?

这里有篇不错的文章,点击打开参考:如何将页脚固定在页面底部

问题4、

图片在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。

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