当前位置: 代码迷 >> HTML/CSS >> js跟css控制DIV永远固定在页面某个地方
  详细解决方案

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

热度:600   发布时间:2012-11-25 11:44:31.0
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>

?

  相关解决方案