Question

我使用的位置：固定;使div调整到不同的屏幕尺寸。在这个简化的例子中，高度设置为100％，以制作div＆＃34;示例＆＃34;总是占据屏幕的整个高度。我想要做的是在这个div之上和之下创建空间我是通过使用position: fixed;和top: 100px; bottom: 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

Answer 2

你似乎误解了盒子模型。当您说“height：100％”时，表示元素的高度与包含布局的包含元素的像素数相同。设置顶部：100px将导致盒子向下移动100px，但它不会影响盒子的高度。因此，100px的框将溢出视口。如果您指定bottom：100px，则相同，但该框的前100px将使视口下溢。

删除高度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; 
}

Answer 3

试试这个而不是高度：100％，这就足够了; http://jsfiddle.net/xd2j2shm/1/

height: calc(100% - 200px);

Answer 4

编辑：我更喜欢RMo的回答。它更简单。话虽如此，他们都工作。

为了澄清，听起来你希望div能够覆盖100％的高度，顶部为100px，底部为100px。

这样做的方式相对较新。您需要使用calc属性的height值：

#example {
    background-color: #333;
    width: 500px;
    height: calc(100% - 200px);
    position: fixed;
    top: 100px; 
}

它在现代浏览器中得到广泛支持：http://caniuse.com/#feat=calc

使用固定位置100％高度

4 个答案: