如何用CSS把层固定在整个网页的最底部？

html-css023

如何用CSS把层固定在整个网页的最底部？,第1张

html代码

<body>

<DIV id="container">

<DI id="content">

<h1>Content</h1>

<p>请改变浏览器窗口的高度，以观察footer效果。</p>

<p>这里是示例文字，DIV固定………，这里是示例文字。</p>

</DIV>

<DIV Vid="footer">

<h1>Footer</h1>

</DIV>

</DIV>

</body>

CSS代码：

程序代码

body,html{

margin:0

padding:0

font:12px/1.5arial

height:100%

}

#container{

min-height:100%

position:relative

}

#content{

padding:10px

padding-bottom:60px

/*20px(font-size)

x2(line-height)+10px(padding)x2=60px*/

}

#footer{

position:absolute

bottom:0

padding:10px0

background-color:#AAA

width:100%

}

#footerh1{

font:20px/2Arial

margin:0

padding:010px

}

<script language="javascript">

function diff(x){

ie4=(document.all)?true:false

if (ie4){

block=x.style

}

var a=screen.width

switch (a){

case 1024:

block.left=""+(parseInt(block.left)+112)

break

case 1152:

block.left=""+(parseInt(block.left)+176)

break

case 1280:

block.left=""+(parseInt(block.left)+240)

break

}}

</script>

<div id="mooon" style="position:relativewidth:350pxheight:14pxz-index:1background-color: #cccccclayer-background-color: #6699ccborder: 1px none #000000left:150pxtop:385px">

层的内容 </div>

<script>diff(mooon)</script>

注意：上面这种方法能实现层的固定，但有一个问题是要固定的这个层会独占用高度，以下的方法可以解决：

<div id="Layer1" style="position:absolutewidth:49pxheight:14px">

<div id="mooon" style="position:absolutewidth:645pxheight:43pxz-index:1layer-background-color: #6699ccborder: 0px none #000000left:330pxtop:380px">内容

＜／div＞

</div>

这些代码可以让层固定显示

有两种方式；一种是绝对定位方式，一种是通过固定定位方式(固定定位是浮动在浏览器的固定位置的，就是不能随浏览器的滚动而变化，始终在浏览器的底部)；

能用到的css样式：position:absoluteposition:fiexd

<div class="navdown" style="width:1000pxheight:50px">

<li>导航</li><li>导航</li><li>导航</li><li>导航</li><li>导航</li><li>导航</li>

</div>

css:

.navdown{position:absolute:bottom:0}

.navdown{position:fiexdbottom:0}