css+div学习小记(1)

最新推荐文章于 2023-09-01 17:45:43 发布

原创最新推荐文章于 2023-09-01 17:45:43 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

web前台专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS将DIV固定在网页底部的方法。通过设置外部容器的高度为100%，并使用绝对定位将底部信息固定在容器底部，使得无论页面内容多少，底部信息始终保持在相同位置。

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了，其实就是 [color=red]居中[/color]

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

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