web-dev-qa-db-ja.com

ページではなく、画面の下部にdivを配置します

解像度に関係なく、Webページの画面の下部に灰色のバーを配置しようとしています。しかし、私が試してみると、別の解像度で行くと上下するようです。これを修正する方法はありますか？

また、バーはdiv idタグを使用してCSSから作成されます。

/* HTML*/
<div id="info">Scroll for info</div>

/* CSS */
<style>
#info { 
    height: 40px; 
    position: relative; 
    margin-top: 25%; 
    background-color: #393838; 
    opacity: 
}
</style>

編集：画面の下部に配置したいのですが、下にスクロールすると画面の上部に向かって上昇します。

htmlcssalignmentprogress-bar
26
Nikolas

常に下部に配置する場合は、position: fixedを使用する必要があります。これを試すことができます：

#info { 
    height: 40px; 
    position: fixed; 
    bottom:0%;
    width:100%; 
    background-color: #393838; 
    opacity: 1;
}

http://jsfiddle.net/rX4nd/1/

47
putvande

エントリーも追加してみてはいかがですか？

.someDiv {
  position:fixed;
  width:50%;
  height:300px;
  margin-left:-25%;
  background:#063;
  bottom:0px;
  left:50%;
}
0
MastaBaba