Question

无论分辨率如何，我都试图在我的网页屏幕底部放置一个灰色条。但是，当我尝试时，当我进入不同的分辨率时，它似乎只是上升或下降。有什么方法可以解决这个问题吗？

此外，该栏由CSS使用div id标记构成。

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

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

编辑：我希望它位于屏幕的底部，但是当我向下滚动时，它会向我的屏幕顶部移动。

Answer 1

如果您希望它位于底部并始终位于底部，则必须使用position: fixed。你可以试试这个：

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

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

Answer 2

如何添加输入？

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

Answer 3

以下是一些文档，可以帮助您实现所需的功能。 https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

Tl; dr，设置“位置：固定”以将其放置在父级渲染部分的底部。

在屏幕底部放置一个div，而不是页面

3 个答案: