8

我正在尝试使用某种可滚动的覆盖来消除网站的其余部分。我似乎无法在我的固定元素中的绝对元素上获得 100% 的高度。

http://codepen.io/intellix/pen/GBltK

section {
  background: red;
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow-x:auto;

}

article {
  background: blue;
  position: absolute;
  top:0;
  width:300px;
  bottom: 0;
  left: 0;
}

如果我设置底部：0；在绝对元素上，当页面不溢出时它会填充高度。当页面溢出时，它会留下一个间隙。

当我在我的绝对元素上使用底部：自动时，它会用溢出填充高度，但会留下一个没有溢出的间隙！

如果您调整窗口大小使内容适合，然后调整大小使内容不适合，您会看到它在这两种情况下都不起作用。

4

1 回答 1

10

I think you want to use min-height and bottom:auto here.

article {
  background: blue;
  position: absolute;
  top:0;
  width: 300px;
  bottom: auto;
  min-height: 100%;
  left: 0;
}

The reason you need min-height:100%; and can't use height:100%; is because when the section content in scrollable it's height is actually greater than 100%.

Longer explination:

With positioned (position: relative|fixed|absolute;) elements, percentage based heights are determined relative to their offset parents. In the case of the article element, it's offset parent is the section element.

The section element uses top:0px; and bottom:0px; to determine it's height. These values are determined by the height of it's offset parent which is the html element

html is a special case where height:100%; is the size of the view-able window, which is why your scrollable element has a height larger than 100%.

于 2013-03-05T22:41:55.943 回答