Question

我的结构通常是这样的：

<div id="all">
  <div id="page">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

在身体将保持背景图案的情况下，“全部”将为页面上下移动留下阴影，“页面”通常也可能具有重复背景图案。

我尝试过使用css height / min-height属性的变体：

html, body {
    height:100%;
    ...
}
#all {
    height:100%; 
    min-height:100%; 
}
#page {
    height:100%; 
    min-height:100%;
    height:auto !important;
}

好像我从“全部”移除了高度：自动然后看起来它可以正常工作直到滚动，然后在滚动之后所有的背景消失了

example

但是，如果我保持高度：自动，那么我就会遇到页面无效的背景问题

example

希望有人知道修复？

Answer 1

我只想翻转div＃all和div＃page ...

的位置

<div id="page">
  <div id="all">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

Answer 2

嗯，这就是我最终得到的CSS：

html, body {
    height:100%; /* IE6: treaded as min-height*/
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    color: #494949;
    text-align: center;
    background-color: #3f91a7;
    background-image: url(images/bg_body.jpg);
    background-repeat: repeat-x;
    background-position: center top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#all {
    margin: 0px;
    padding: 0px;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;
    background-image: url(images/bg_all.png);
    background-repeat: repeat-y;
    background-position: center top;
    overflow: hidden;
}
#page {
    width: 993px;
    padding: 0 0 10000px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: -10000px;
    margin-left: auto;
    text-align: left;
    background-color: #FFF;
    background-image: url(images/bg_page.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;
}
#header, #footer {
    text-align: center;
    font-size: 16px;
    padding: 20px;
}
#content {
    padding: 25px;
}

我没有机会在Firefox以外的任何地方进行测试，但是，它会给你一个良好的开端。

Answer 3

虽然这个问题是在几年前发布的，但我遇到了同样的挑战，今天发现了这个早期的帖子。虽然我认为现在可能有更好的解决方案，但我想分享我今天发现的那个。

有同样的问题，背景1全屏，自适应和完全低于其他所有和另一个重复（-y）背景数字2应该在顶部，但不滚动视线，因为它被设置为遵循的高度窗口被赋予持有背景2的特定div。

让我们从我创建的div开始：

<div id="full_background">
    <img src="images/bkg_main.jpg" alt="" />
    <div id="absolute">Contains background set to repeat-y</div>
    <div id="content">Contains the content</div>
</div>

css看起来像这样：

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

#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }

#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }

#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }

首先，我添加了一个全屏＆amp;使用以下解决方案（使用div full_background和img标签）将背景图像调整大小（使用div full_background和img标签）（非常简单的css解决方案，在每个浏览器中都像魅力一样，大多数旧版本，例如IE7） - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html＆gt ;见aj_nsc的最后答案

接下来，使用以下jQuery方法 - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - 我创建了一个id = absolute的div，它与浏览器窗口的高度相同（同样在调整大小时）。我在这里放置了重复的（-y）背景编号2。将此div设置为position：fixed，当滚动内容的div时，它将保持不变。

然后在这个div下面，你把div放在你的内容中，它可以自由地向下扩展到浏览器窗口之外。

滚动时，两个背景将始终填充浏览器窗口的整个区域（垂直方向）并保持不变，内容在其上上下滚动。这样，在调整大小时，您还要确保两个背景始终保持填满整个背景区域。

我在CH，FF，IE7-9和Safari中测试了这个解决方案，它在所有这些解决方案中都没有任何问题。

Answer 4

你试过了吗？

html,
body {
     margin: 0;
     padding: 0;
     height: 100%;
}
#all {
     min-height: 100%;
}

？仅对于IE 6，您应该为#all设置height: 100%;（因为它基本上将其解释为最小高度（作为错误的结果）。由于IE6不理解最小高度属性，因此高度有效变为替代最小高度。）

如果您为其他浏览器设置height: 100%;，则会将其视为视口的100％高度，而不是页面的100％，因此滚动将无法正常工作。

我对downvote的评论：

很明显，我的答案并没有解决整个问题。我们在这里看到的情况似乎相当复杂 - 至少在这里似乎没有人找到答案吗？我甚至研究了Ingo Chao的优秀（德语）书籍，得出了相同的结论：设定父母的身高是行不通的，设定孩子的身高是不行的，如果父母的身高没有明确设定，而是动态地根据内容的大小。

但是我的回答仍然有助于限制可能性 - 因为在#all上设置height很可能不会在除IE 6之外的任何浏览器上工作。如果您不同意，请发表评论，因为在在这种情况下，我也想了解更多相关信息。

Answer 5

以下是发生的事情：您已设置html＆amp; body高度为100％，但100％是视口的高度，而不是文档的高度。由于#all的高度设置为100％，因此它设置为父高度的100％，恰好是正文，它设置为视口高度的100％。一切都继承了视口的高度。

解决此问题的方法实际上与修复具有外部容器的浮动内容的方法相同。您只需将overflow:auto;放在#all上即可。您甚至不需要任何其他元素的任何高度声明，并且您可以消除#all或#page div。

此处有更多信息：http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answer 6

这对我有用：

#page {
    width: 993px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    text-align: left;
    background-color: #FFF;
    background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    /* height:100%;  IE6: treaded as min-height*/
    height: expression(document.body.offsetHeight); /* sets min-height for IE */
    overflow: auto;
    min-height:100%; /* real browsers */
    /* height:auto !important; */
}

Answer 7

在div上忘记100％，尝试将背景图像移动到html元素和身体的全高边框。

html {
    height:100%;
    background-color: blue;
}
body {
    margin: auto auto;
    padding: 0;
    color: #494949;
    /*min-height: 100%; */
    height:100%; /*for ie6*/
    border-left:solid 2px red;
    border-right:solid 2px red;
    background-color:#fff;
    width: 960px;
}

Answer 8

你试过这个：

function getWindowHeight() {
                var windowHeight = 0;
                if (typeof(window.innerHeight) == 'number') {
                    windowHeight = window.innerHeight;
                }
                else {
                    if (document.documentElement && document.documentElement.clientHeight) {
                        windowHeight = document.documentElement.clientHeight;
                    }
                    else {
                        if (document.body && document.body.clientHeight) {
                            windowHeight = document.body.clientHeight;
                        }
                    }
                }
                return windowHeight;
            }


window.onload = init;



 function init(){
 document.getElementByID("all").style.height = getWindowHeight() + "px";

    }

或者将page代替all

多个div的100％高度

8 个答案: