固定容器相对于DIV - 这可能吗？

Question

我正在寻找一种方法让导航箭头（红框）按照这种方式跟随屏幕：

但是我找不到把它们放在那里的方法......把它们放到最左边非常容易但是我希望它在中间并且它有点问题。我设法让它在90％的浏览器中工作（绿色解决方案）但它并不完美，并且它在某些流行的浏览器中不起作用。

更新＃1：还有一件更重要的事情 - 我希望红盒有时高于600px的内容（在600px及以下的小分辨率下）。

更新＃2：600px容器实际上：max-width: 1600px; width: 90%;和600px只是一个示例解决方案，可以更好地说明差距。

Answer 1

是的，你可以。向左或向右使用50％，然后根据您使用的方向向左或向右调整边距。 假设您的盒子宽度为100px：

#box1{
    position: fixed;
    right: 50%;
    margin-right:-300px; //adjust more or less as you want
}
#box2{
    position: fixed;
    left: 50%;
    margin-left:-300px; //adjust more or less as you want
}

Answer 2

类似于this？

你可以使用max-width来测试多个宽度。

检查是否适合你。

---

我在这里复制代码，用于“面向未来”（如果有一天代码消失）

HTML

<div id="buttons">
  <div id="left">L</div>
  <div id="right">R</div>
</div>

<div id="foobar">
  <div id="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
</div>

CSS

#foobar {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 50px;
}

#content {
  background-color: #ddd;
}

#buttons {
  width: 700px;
  margin-left: -350px;
  background-color: #aaa;
  position: fixed;
  left: 50%;
  top: 50%;

}
#left, #right {
  width: 50px;
  height: 50px;
  position: absolute; 
  background-color: red;
}
#right {
  right: 0
}

JS（JQUERY）

$(function(){
  refresh_buttons = function(){
    w = $('#foobar').width() + 100;
    $('#buttons')
      .css('width', w)
      .css('margin-left', -w/2);
  };

  refresh_buttons();
  $(window).resize(refresh_buttons);
})