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>