首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

js跟css控制DIV永远固定在页面某个地方

2012-11-25 
js和css控制DIV永远固定在页面某个地方js代码:?style typetext/csshtml,body {width: 100%height: 1

js和css控制DIV永远固定在页面某个地方

js代码:

?

<style type="text/css">

html,body {

width: 100%;

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

?

#Main {

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

height: 100%;

overflow: auto;

z-index: 1;

}

?

#ToolBar {

position: absolute;

bottom: 30px;

right: 50px;

width: 70px;

height: 50px;

text-align: center;

background: #ccc;

z-index: 2;

overflow: hidden;

}

</style>

?

?

css代码:

?

html,body {

width: 100%;

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

?

#Main {

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

height: 100%;

overflow: auto;

z-index: 1;

}

?

#ToolBar {

position: absolute;

bottom: 0px;

right: 16px;

width: 100%;

height: 20px;

text-align: center;

background: #ccc;

z-index: 2;

overflow: hidden;

}

?

?

页面代码:

?

<body>

<div id="Main">

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

Test<p>

</div>

<div id="ToolBar">我是固定的</div>

</body>

?

热点排行