html - 100% 高度使用固定位置

Question

我正在使用 position: fixed;使 div 适应不同的屏幕尺寸。在这个简化的示例中，高度设置为 100%，以使 div“示例”始终占据屏幕的整个高度。我想做的是在这个 div 上方和下方留出空间，我这样做是通过使用 position: fixed; 和 top: 100px;底部:100px;

问题是代码只运行 top: 100px; 而不是两者。有什么办法可以解决这个问题吗？

Fiddle

HTML

<div id="example"></div>

CSS

#example {
  background-color: #333;
  width: 500px;
  height: 100%;
  position: fixed;
  bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
  top: 100px;
}

编辑

如果我使用此函数设置高度，而不是将 css 中的高度设置为 100%。那我该怎么办？

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('#example').css('min-height', windowHeight);
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

Answer 1

您必须删除高度:100%。浏览器将计算顶部值和底部值之间的距离并创建您需要的高度。

新代码:

#example {
    background-color: #333;
    width: 500px;
    position: fixed;
    bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
    top: 100px; 
}

JSFiddle