Question

抱歉，我无法让这个工作。应该是一个快速的答案。

我的html布局如下：

<html>
    <header> 
    ... 
    </header>

    <body> 
        <div class = "background"></div>
        <div class = "content">
        ...
        </div>
    <body>
</html>

我希望背景div只是在页面的整个长度上放置一个1000px的背景色。然后在该背景颜色内，每侧填充40px的内容。

css是这样的：

body {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.background {
    position:absolute;
    top:0px;
    width:1000px;
    height:100%;
}

.content {
    min-height:100%;
    padding-left:40px;
    padding-right:40px;
}

我认为它的工作方式如此......主体div将扩展为保持.content div的最小高度。这意味着.background div的100％高度将填充整个主体，因此填充页面的长度。但事实并非如此。它只填充窗户高度。我哪里错了？

由于

Answer 1

正如topek猜测的那样，这样做会：

html, body{
  height:100%
}

这样做的原因是因为只有父元素在其上定义了高度，百分比CSS高度才有效。通过添加上述内容，您可以为.background的父母提供一个高度。

更新：根据OP的评论，以下是如何让.background div始终显示为填充视口：

html, body {
   height: 100%;
   padding: 0;
   margin: 0;   
}

/* Fixed element that takes up entire viewport */
.background {
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;    

   width: 100%;
   height: 100%; 
}

/* Content that stacks above .background */
.content {
   position: relative;
   z-index: 2;
}

当.content比视口大且用户滚动时，.background的固定位置将始终保持在视图中。

当然，a handy example。

Answer 2

您只需要：

body, html {
    height:100%
}

然后指定height:100%;任何想要拥有全高的DIV。

BTW - 1000px宽是一个不好用的单位。拥有1024个宽屏幕的用户将获得水平滚动条。最好坚持980或更低。 960是好的，因为它可以被许多因素分开。

Answer 3

您应该将bg放入html或body元素中作为首选。

html { background: url("bg.jpg") no-repeat top center; }

或

body { background: url("bg.jpg") no-repeat top center; }

修正：

background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */

Answer 4

我认为这就是你要找的东西。

http://jsfiddle.net/sg3s/GxRcp/

这个小例子中的关键是position: fixed; .background，以便在滚动时保留在屏幕上。

如果你真的不想这样做，并希望背景扩展ARROUND，那么只需将它作为普通/相对定位的元素，然后将它包裹在.content ...

如果您对您尝试创建的布局进行更精确的描述（也许为什么会这样），我们可能会更好地帮助您。

顺便说一句，在你的示例html中有一个错误，header应为head。

另一个css 100％身高的问题

4 个答案: