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() {
            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 οnlοad="myFunc() "οnresize="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。

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

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读