中心div在视口中滚动

Question

我正在尝试将页眉和页脚放在视口中（如下面的游戏）。内容垂直和水平滚动，但页眉和页脚应保持在视口的相同位置。我尝试过使用以下CSS：

.BottomMenu {
    background-color: #ADADAD;
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

但这会产生一个仅垂直粘贴的页脚。当内容在任何方向移动时，我需要它留在那个位置。

Answer 1

我认为，问题在于您的left和right值。下面的代码可以解决问题。

body {
  width: 5000px;
  height: 5000px;
}

#element {
  width: 75px;
  height: 25px;
  position: fixed;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  border: solid orange 2px;
}

<div id="element"></div>

translate方法调整元素相对于自身的位置。例如，如果您的元素包含width: 100px并设置为transform: translateX(-50%)，则会将元素50px移动到其所在位置的左侧。

top: 100%;
left: 50%;

像这样工作......

 _________________
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|_________________|
         |___e___|   

和

transform: translate(-50%, -100%)

就像这样......

 _________________
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|     _______     |
|____|___e___|____|

Answer 2

这可以通过使用.BottomMenu类的设置宽度来实现。

我创建了一个非常基本的JSFiddle，演示了使用固定的宽度，边距和位置来保持div居中。

#bottom-menu {
  position:fixed;
  bottom:0;
  left:50%;
  width:250px;
  margin-left:-125px;
  //optional
  padding: 10px;
  height:50px;
  line-height:50px;
}