代码之家 › 专栏 › 技术社区 › kilrizzy

100%高度适用于多个div

height html css

kilrizzy · 技术社区 · 16 年前

我通常把我的结构布置成这样:

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

在主体将保持背景模式的地方,“all”将保持页面上下的dropshadow,“page”通常也可能具有重复的y背景。

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

如果我把height:auto从“all”中去掉,它看起来会一直工作,直到你滚动,然后在滚动之后,所有的背景都会出现

example

但是,如果我保持height:auto在那里,那么我会遇到页面不工作的背景问题

example

希望有人知道解决办法?

8 回复 | 直到 16 年前

Chibu 16 年前

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以外的任何地方测试它,但是,等一下,它会给你一个好的开始。

superUntitled 16 年前

我只要翻一下你的div#all和div#页面的位置。。。

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

Blux 13 年前

虽然这个问题是几年前发布的,但今天我遇到了同样的挑战,发现了这个更早的帖子。尽管我认为现在可能会有更好的解决方案,但我还是想和大家分享我今天找到的解决方案。

有同样的问题,背景1全屏,自适应和完全低于一切其他和另一个重复(-y)背景2号应该放在顶部,但不能滚动,因为它被设置为遵循窗口的高度,这是给特定的div持有背景2。

让我们从我创建的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; }

首先,我添加了一个全屏&使用以下解决方案(非常简单的css解决方案,在每个浏览器和大多数旧版本(例如IE7)中都像一个符咒一样工作)将背景图像调整到我的站点(使用div full\ u背景和img标记)- http://www.webdeveloper.com/forum/archive/index.php/t-256494.html &燃气轮机;见aj\U 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,它可以自由地向下扩展到浏览器窗口之外。

滚动时,这两个背景会一直填满浏览器窗口的整个区域(垂直方向也一样),并保持不变,内容会在它们上面上下滚动。

Isley Aardvark 16 年前

事情是这样的:你已经准备好了 html body 使高度为100%,但该100%是视口的高度,而不是文档的高度。自从 #all

overflow:auto; 在…上 #全部 . 您甚至不需要对任何其他元素进行任何高度声明,并且可以消除或者 #page

Chris Lercher 16 年前

你试过:

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

height: 100%; 对于#all(因为它基本上将其解释为最小高度(由于一个bug)。由于IE6不理解minheight属性,height实际上变成了minheight的替代品。

如果你设置 高度:100%; 对于其他浏览器,他们会将其视为视口的100%高度,而不是页面的100%,因此滚动无法正常工作。

我对否决票的评论是:

很明显,我的回答并不能解决整个问题。我们这里的情况,似乎相当复杂——至少这里似乎还没有人找到答案?我甚至看过Ingo Chao的优秀(德语)著作,也得出了同样的结论:如果父母的身高没有明确设定,而是根据内容的大小动态设定,那么设定父母的身高就行不通,而设定孩子的身高也行不通。

但我的回答仍然有助于限制可能性一点-因为设置 height 在#all上,除IE 6外,其他浏览器都很可能无法使用。如果您不同意,请发表评论,因为在这种情况下,我也想了解更多信息。

Todd 16 年前

这对我有用:

#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; */
}

gum411 16 年前

忘记100%的divs,尝试将背景图像移动到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;
}

-2

ant 16 年前

你试过这个吗:

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