CSS 高度案例

Question

我创建了一个页面，其中的内容是使用 ajax 动态加载的。我将加载内容的背景颜色设置为透明白色。当内容没有填满整个页面时，我希望背景扩展到页面底部 minux 20px，就像这个 css 一样:

#content {
    background-color: rgba(255, 255, 255, 0.5);
    position:absolute;
    top: 20px; left: 380px; bottom: 20px;
    padding: 20px;
}

当内容超出页面底部时，我希望背景也随之延伸，并在背景下方留出 20 像素的边距。通常我会使用 display: block;完成这个但覆盖底部:20px;规则。如何让 CSS 在这两种情况下都按我想要的方式工作？

Answer 1

尝试这样的事情:

#content {
  margin-bottom: 20px;
  padding: 20px;
  min-height: 800px; /* height of the window */
  background-color: rgba(255, 255, 255, 0.5);
}​ 

您可能需要考虑使用 jQuery 将最小高度设置为等于用户的窗口高度。

var windowHeight = $(window).height();
$("#content").height(windowHeight);