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

最新推荐文章于 2024-06-18 19:41:46 发布

JHON_07

最新推荐文章于 2024-06-18 19:41:46 发布

阅读量9k

点赞数 1

分类专栏： HTML5

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学HTML+CSS布局，尝试自己写一个百度首页，但是footer的定位遇到麻烦并且百度没有好的解决方法，在此记录下逐步的过程。记录之，备忘。

初学，解决方法难免出现不妥之处，也请看到这篇文章的前辈指点一二，在此先谢过。

首先是设置为

[css]view plaincopy 
   
 footer{  
     clear: both;  
     display: block;  
     position: absolute;  
     bottom: 100px;  
 }  

时效果为：确实绝对定位到了底部，但是由于是绝对定位，使用

[html]view plaincopy 
   
 footer{  
     clear: both;  
     display: block;  
     text-align: center;      
     margin: 0px auto;  
     position: absolute;  
     bottom: 100px;  
 }  

并没有居中的效果，想想这应该是footer的宽度设置问题，设置宽度width之后果断有效果，考虑到不同尺寸显示器的兼容性问题，那么可以调用JS动态设置width值，代码如下：

[javascript]view plaincopy 
   
 <!--动态改变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%;

[css]view plaincopy 
   
 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定位，这样就可以保证，缩小到某一个值时距离顶部距离不变，放大到超过这个值时，距离底部不变。具体实现如下代码：

[html]view plaincopy 
   
 <!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为

[css]view plaincopy 
   
 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中怎么居中，直接上代码：

[html]view plaincopy 
   
 <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>  

[css]view plaincopy 
   
 #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;  
 }  