html 里面 div 滚动条保持在底部 及 div 位置固定。

html-css034

html 里面 div 滚动条保持在底部 及 div 位置固定。,第1张

1、新建一个html文件,命名为test.html。

2、在test.html文件内,使用div标签创建一个模块,用于测试。

3、在test.html文件内,给div添加一个class属性,用于设置其样式。

4、在css标签内,通过class设置div的样式,定义其宽度为200px,高度为200px,背景颜色为红色。

5、在css标签内,再使用position属性设置div为绝对定位,距离底部为0px,距离左边缘为0px。

6、在浏览器打开test.html文件,查看实现的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>position:fixed in IE6 修正</title>

<style type="text/css">

<!--

body{padding:0 10pxheight:100%

font-size:12pxoverflow-y:auto}

#leftMenu { background: #CCCCCCheight: 300pxwidth: 150px

position: fixedleft: 400pxtop: 50pxborder: 1px solid #666666padding: 10px

letter-spacing: 0.2emcolor:#990033}

#main{ float:leftwidth:800pxheight:2000pxcolor:#FFF}

* html{overflow-x:autooverflow-y:hidden}

* html #leftMenu{position:absolute}

-->

</style>

</head>

<body>

<div id="leftMenu">

这里是固定的!

</div>

<div id="main">

这里是不干扰的正文!

</div>

</body>

</html>至于9个DIV怎么布局应该不用说了吧