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

html-css03

如何用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中控制背景图片大小的是background-size，background-size 属性规定背景图像的尺寸。使用方法为

background-size: length|percentage|cover|contain

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。