css+div学习初记(1)

2012-09-07

css+div学习小记(1)DIV固定在网页底部的CSS方法：比如里面是一些版权信息。因为我整页的内容比较少，但是需要

css+div学习小记(1)
   DIV固定在网页底部的CSS方法：
比如里面是一些版权信息。因为我整页的内容比较少，但是需要固定底部信息，不让它移动。
   基本思路=>
首先考虑外层设置一个容器DIV，id设为#container，使他的高度为浏览器窗口的高度，然后将#footer这个DIV设置为#container的子DIV，并使用绝对定位的方式，使他固定到#container的底端，以实现希望的把DIV固定在网页底部效果。
代码：

<style type="text/css">
   body{height:100%; margin:0;    padding:0;    font:12px/1.5arial; }
   #contaniner{min-height:100%; position:relative;}
   #content{padding: 10px;}
   #footer{    position:absolute;    bottom:0;       background-color:#AAA;    width:100%;   }
</style>
<body>
<DIV id="container">
    <DIV id="content">
      <p>请改变浏览器窗口的高度，以观察footer效果。</p>
      <p>这里是示例文字，DIV固定………，这里是示例文字。</p>
    </DIV>
    <DIV id="footer">
      <h1>Footer</h1>
    </DIV>
</DIV>
</body>

解释：body{height:100%; margin:0;    padding:0; }让整个body充满整个页面；
     #footer{    position:absolute;    bottom:0;}footer 绝对位置位于底部

----------------------------------------

   css代码中 margin:auto 和 margin:0 auto 有什么区别？
   答：有区别
       margin:auto是指上下左右全都auto
       margin:0 auto （其实表示margin:0 auto 0 auto）是指上下是0，左右auto
       auto实现居中很简单啊，你左右边距都auto了，其实就是居中

----------------------------------------
   如何将网页信息定位在浏览器的固定位置，而不随着滚动条滚动而改变；
   答：#fixed{position:fixed;top:5em;right:5em;}

      IE6中利用容器对溢出内容的处理方式来实现的

热点排行