1

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

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

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

4

2 回答 2

0

Try something like this instead:

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

You may want to consider using jQuery to set the min-height to equal the user's window height.

var windowHeight = $(window).height();
$("#content").height(windowHeight);
于 2012-09-25T18:51:01.970 回答
0

嗯，如果没有小提琴示例http://jsfiddle.net，很难理解您的需求：| 从你说的情况来看，似乎是身体问题。您可以为加载的部分设置一个“body class”（创建一个容器 div，在其中添加宽​​度和高度为 100% 的所有内容），您可以为其设置背景，并且仅适用于未填充所有部分的内容在 div 内容中显示，还应用另一种背景颜色并设置您想要的 margin-bottom。干杯。

于 2012-09-25T19:05:14.903 回答