您的位置: 首页  >  文章  >  HTML5：footer定位（底部+居中）的探讨+div图片居中问题

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

分类: 文章 • 2024-02-21 18:35:22

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

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

首先是设置为

[css] view plain copy
  1. footer{  
  2.     clear: both;  
  3.     display: block;  
  4.     position: absolute;  
  5.     bottom: 100px;  
  6. }  
时效果为：确实绝对定位到了底部，但是由于是绝对定位，使用

[html] view plain copy
  1. footer{  
  2.     clear: both;  
  3.     display: block;  
  4.     text-align: center;      
  5.     margin: 0px auto;  
  6.     position: absolute;  
  7.     bottom: 100px;  
  8. }  
并没有居中的效果，想想这应该是footer的宽度设置问题，设置宽度width之后果断有效果，考虑到不同尺寸显示器的兼容性问题，那么可以调用JS动态设置width值，代码如下：

[javascript] view plain copy
  1. <!--动态改变footer的width值，实现文字居中效果。-->  
  2.     <script>  
  3.         var w=window.innerWidth  
  4.         || document.documentElement.clientWidth  
  5.         || document.body.clientWidth;  
  6.   
  7.         var h=window.innerHeight  
  8.         || document.documentElement.clientHeight  
  9.         || document.body.clientHeight;  
  10.         document.getElementById("footer").style.width=w + "px";  
  11.     </script>    
居中底部都搞定了，出现以下问题：

问题1、

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

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

问题2、

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

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

水平居中怎么实现呢？其实很简单！设置为width: 100%;

[css] view plain copy
  1. footer{  
  2.     clear: both;  
  3.     display: block;  
  4.     text-align: center;   
  5.     margin: 0px auto;  
  6.     position: absolute;  
  7.     bottom: 100px;  
  8.     width: 100%;  
  9. }  

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

新问题问题3：

垂直方向上移的问题可以通过设置top值来解决。但是设置top后bottom就无用了（逻辑上这个肯定冲突，设置了top已经定位了，又设置了bottom，那么浏览器听谁的？同理left和right也存在悖论），具体的可以试一下，那怎么办呢？

问题的根源在于使用绝对定位和设置bottom时，footer是跟随浏览器窗口变化而变化的，那我们要做的就是打破这种格局。

解决思路1、当界面上下伸缩时，动态调整css样式即可：具体为当达到某一位置时，使用buttom定位，当超过这个位置时，使用top定位，这样就可以保证，缩小到某一个值时距离顶部距离不变，放大到超过这个值时，距离底部不变。具体实现如下代码：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <link rel="stylesheet" type="text/css" href="css/main.css">  
  6.     <title>百度一下，你就知道</title>  
  7.   
  8.     <script>  
  9.         function myFunc() {  
  10.             var winHeight=window.innerHeight  
  11.             || document.documentElement.clientHeight  
  12.             || document.body.clientHeight;  
  13.   
  14.             if (parseInt(winHeight)<750){  
  15.                 document.getElementById("footer").setAttribute("class", "dAdjustTop");  
  16.                 /*document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");*/  
  17.             } else {  
  18.                 document.getElementById("footer").setAttribute("class", "dAdjustButtom");  
  19.                 /*document.getElementById("inputtext").value=winHeight+" "+document.getElementById("footer").getAttribute("class");*/  
  20.             }  
  21.         }  
  22.     </script>  
  23.   
  24. </head>  
  25.   
  26. <body onload="myFunc() "onresize="myFunc()">  
  27.     <nav>  
  28.         <a href="http://news.baidu.com" target="_blank">新闻</a>  
  29.         <a href="http://www.hao123.com" target="_blank">hao123</a>  
  30.         <a href="http://map.baidu.com" target="_blank">地图</a>  
  31.         <a href="http://v.baidu.com" target="_blank">视频</a>  
  32.         <a href="http://tieba.baidu.com" target="_blank">贴吧</a>   
  33.     </nav>  
  34.       
  35.     <div id="mid">  
  36.         <div id="logo">  
  37.             <!--<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png">-->  
  38.             <img src="images/bd_logo1.png">  
  39.         </div>  
  40.         <div id="input">  
  41.             <input id="inputtext" value="" maxlength="100" autocomplete="off">  
  42.             <input id="button" type="submit" value="百度一下">  
  43.         </div>  
  44.     </div>  
  45.       
  46.     <footer id="footer">  
  47.         <p>  
  48.             <a href="http://www.baidu.com/cache/sethelp/index.html" target="_blank">把百度设为主页</a>  
  49.                  
  50.             <a href="http://home.baidu.com">关于百度</a>  
  51.                  
  52.             <a href="http://ir.baidu.com">About Baidu</a>  
  53.         </p>  
  54.         <p>  
  55.             ©2014 Baidu   
  56.             <a href="/duty/" name="tj_duty">使用百度前必读</a>  
  57.              京ICP证030173号   
  58.         </p>  
  59.         <address>  
  60.             Written by <a href="http://blog.****.net/zhanh1218">The_Third_Wave</a>  
  61.         </address>  
  62.     </footer>  
  63. </body>  
  64.   
  65. </html>  
CSS为
[css] view plain copy
  1. body{  
  2.     background-color: #FFFFFF;  
  3.     margin: 0px auto;  
  4.     padding: 0px;  
  5. }  
  6.   
  7. nav{  
  8.     display: block;  
  9.     width: 400px;  
  10.     height: 100px;  
  11.     float: right;  
  12. }  
  13. nav a {  
  14.     float: right;  
  15.     display: inline-block;  
  16.     padding: 15px;  
  17.     color: black;  
  18.     font-weight: bold;  
  19. }  
  20.   
  21.   
  22. #mid{  
  23.     position: relative;  
  24.     top: 100px;  
  25.     width: 100%;  
  26.     min-width: 610px; /* 保证图片和输入框绝对居中 */  
  27.     height: 200px;  
  28.     text-align: center; /* 只对input有效，图片无效 */  
  29.     float: left;  
  30.     padding-bottom: 100px; /*重要！给footer预留的空间*/    
  31. }  
  32.   
  33. img{  
  34.     display: block;   
  35.     width: 270px;  
  36.     height: 129px;  
  37.     margin: 0px auto;  
  38. }  
  39. #logo{  
  40.     margin-bottom: 20px; /* 保证图片和输入框的间距 */  
  41. }  
  42. #input{  
  43.     display: block;  
  44.     width:100%;  
  45.     min-width: 610px; /* 保证子节点两个input不换行 */  
  46.     height: 40px;  
  47.     padding: 0px;  
  48. }  
  49.   
  50. #inputtext{  
  51.     width: 520px;  
  52.     height: 22px;  
  53.     margin-right: 0px;  
  54.     padding: 6px 0px 5px 0px;  
  55.     font: 16px/22px arial;  
  56.     border: 1px #CECABC solid; /*默认边框色为灰色*/  
  57. }  
  58. #button{  
  59.     display: inline-block;  
  60.     width: 80px;  
  61.     height: 35px;  
  62.     font: 16px/22px arial;  
  63.     margin: 0px 0px 0px -6px;  
  64.     padding: 5px 0px 5px 0px;  
  65.     background-color: blue;  
  66.     border: 1px blue solid;  
  67.   
  68. }  
  69.   
  70. footer {  
  71.     /*border: 1px red solid;*/  
  72.     clear: both;  
  73.     display: block;  
  74.     text-align: center;   
  75.     width: 100%;  
  76.     height: 120px;  
  77.     min-width: 610px; /* 保证文字inline-block效果时不换行 */  
  78. }  
  79.   
  80. .dAdjustButtom{  
  81.     position: absolute;  
  82.     bottom: 100px;  
  83. }  
  84.   
  85. .dAdjustTop{  
  86.     position: absolute;  
  87.     top: 530px; /* 750-120-100 JS中tag-footer的height-mid的padding-bottom*/  
  88. }  
代码解析，利用onresize事件，动态设置CSS，我使用class值的改变来达到目的，具体请看JS代码。

解决思路2、我们让他随内容变化，当内容撑不满屏幕时，我们固定footer在底部，在屏幕装不下内容时，我们要保证footer看不见了，也就是拖动页面到最底部时才出现！即做到永远固定于页面底部！怎么做？

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

问题4、

图片在div中怎么居中，直接上代码：

[html] view plain copy
  1. <div id="mid">  
  2.     <div id="logo">  
  3.         <!--<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png">-->  
  4.         <img src="images/bd_logo1.png">  
  5.     </div>  
  6.     <div id="input">  
  7.         <input id="inputtext" value="111" maxlength="100" autocomplete="off">  
  8.         <input id="button" type="submit" value="百度一下">  
  9.     </div>  
  10. </div>  
[css] view plain copy
  1. #mid{  
  2.     position: relative;  
  3.     top: 100px;  
  4.     width: 100%;  
  5.     min-width: 610px; /* 保证图片和输入框绝对居中 */  
  6.     height: 200px;  
  7.     text-align: center; /* 只对input有效，图片无效 */  
  8.     float: left;  
  9. }  
  10. img{  
  11.     display: block;   
  12.     width: 270px;  
  13.     height: 129px;  
  14.     margin: 0px auto;  
  15. }  
  16. #logo{  
  17.     margin-bottom: 20px; /* 保证图片和输入框的间距 */  
  18. }  
  19. #input{  
  20.     display: block;  
  21.     width:100%;  
  22.     min-width: 610px; /* 保证子节点两个input不换行 */  
  23.     height: 40px;  
  24.     padding: 0px;  
  25. }  
  26. #inputtext{  
  27.     width: 520px;  
  28.     height: 22px;  
  29.     margin-right: 0px;  
  30.     padding: 6px 0px 5px 0px;  
  31.     font: 16px/22px arial;  
  32.     border: 1px #CECABC solid; /*默认边框色为灰色*/  
  33. }  
  34. #button{  
  35.     display: inline-block;  
  36.     width: 80px;  
  37.     height: 35px;  
  38.     font: 16px/22px arial;  
  39.     margin: 0px 0px 0px -6px;  
  40.     padding: 5px 0px 5px 0px;  
  41.     background-color: blue;  
  42.     border: 1px blue solid;  
  43. }  

总结：

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.****.net/zhanh1218）原创。还有未涉及的，会不定期更新，有错误请指正。

如果你看到这篇博文时发现不完整，那是我为防止爬虫先发布一半的原因，请看原作者Blog。

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

相关推荐