Question

我看到了类似的问题，但......

我想填写绿色div来获取100％的浏览器，无论其内容如何。

HTML：

  <div id="container">

            <div id="yellow">
                    left 
            </div> 

            <div id="green">
                    right              

              <p>bla bla</p><p>bla bla</p> <p>bla bla</p><p>bla bla</p> 
            </div>
    </div>

CSS：

body，html {

            height:100%;
            background-color:grey;
    }

    #container {

            width:90%;
            background-color:white;
    } 

    #yellow {
            float:left;
            width:30%;
            background-color:yellow;
    }

    #green {
       height:100%;
            height:auto;
            margin-left: 50%;
            background-color:green;
    }

Answer 1

以下内容应该为您提供所需内容（http://jsbin.com/osiviq/1/）：

        body, html {
                margin:0;
                padding:0;
                height:100%;
                background-color:grey;
        }

        #container {
                width:90%;
                background-color:white;
        } 

        #yellow {
                float:left;
                width:30%;
                background-color:yellow;
        }

        #green {
                height: 100%;
                position:relative;
                margin-left: 50%;
                background-color:green;
        }

更新：在您的css顶部添加以下内容（从我的旧网站复制此内容）：

html, ADDRESS, APPLET, AREA, A, BASE, BASEFONT, BIG, BLOCKQUOTE, BODY, BR, B, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, div, DL, DT, EM, FONT, FORM, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, IMG, INPUT, ISINDEX, I, KBD, LINK, LI, MAP, MENU, META, OL, OPTION, PARAM, PRE, P, SAMP, SCRIPT, SELECT, SMALL, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TD, TEXTAREA, TH, TITLE, TR, TT, UL, U, VAR {
    margin:0px;
    border:0px;
    padding:0px;
}

Answer 2

如果您担心长度比屏幕高时滚动，请使用min-height：100％：

#green {
    min-height:100%;
    margin-left: 50%;
    background-color:green;
}

编辑：Firefox在身体所有父div上也需要100％的高度：

#container {
    height:100%;
    width:90%;
    margin:0;padding:0;
    background-color:white;
}

Answer 3

这里有一些事情发生：

元素的默认“高度”为auto *
当“父”元素（body，html）的高度为auto时，生成的高度将根据子项的自然高度计算*
孩子的身高“100％”会搜索显式父级身高。
如果元素的所有父级都具有自动或百分比高度，则height:100%在功能上被忽略。*

例外情况是给出元素绝对或固定定位。这些将根据视口*计算最外层元素的宽度，高度和位置;绝对定位的孩子将根据他们绝对定位的父母*计算他们的位置。
说五次真的很快。

基本上，你可以通过给你的容器（以及你想伸展的任何孩子）position:absolute;并做一些摆弄来管理你想要的东西。

它很可能会很快失控，但它会起作用。有点。

        #container {
                position:absolute;
                top:0;
                left:0;
                min-height:100%;
                width:90%;
                background-color:white;
        } 

        #green {
                min-height:100%;
                position:absolute;
                right:0;
                width:50%;
                background-color:green;
        }

这个例子的第一个地方就是当你把绿色框大大超过页面内容的其余部分时（我发现它可能经常发生）。因为您从流控件中删除了父级并根据视口为其指定了高度，所以不再根据其子级计算其高度，并且较大的子级溢出。呸。

解决此问题的一种方法是删除从HTML元素“滚动”页面的责任。这有一些特殊的兼容性问题。它有时会起作用！

        #container {
                position:absolute;
                top:0;
                overflow:auto;
                left:0;
                min-height:100%;
                width:100%;
                background-color:white;
        }

一般来说，我发现使用绝对定位并不是很好。绝对定位从流量控制中删除元素，我喜欢利用标准流量控制来防止我的页面元素在彼此下方或顶部流动。

目前我最喜欢的肮脏黑客之一看起来像这样： http://jsfiddle.net/AvLQy/

<div id="h4x"></div>

<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>

#sidebar { 
    background:green;
    width:30%;
    float:right;
    position:relative; z-index:99;
}
#h4x {
    position:fixed;
    width:30%;
    top:0;
    right:0;
    height:100%;
    background:green;
    z-index:0;
}

熟悉真正旧css黑客的读者会注意到这是人造栏的丑陋扩展。

它很难看，因为它会创建一个备用的html元素。

但是因为它只涉及将一个元素从流量控制中拉出来，所以你不必担心在儿童身高和定位父母之间的不稳定互动中增加更多内容的效果。

（*）有点。阅读完整故事的规范

填写浏览器的div高度，无论其内容如何

3 个答案: