0

我看到过类似的问题，但是......

我想填充绿色 div 以占据浏览器的 100%，无论其内容如何。

http://jsbin.com/aculed/1/edit

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：

正文，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;
    }
4

3 回答 3

1

如果您担心当长度高于屏幕时滚动，请使用 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;
}
于 2013-06-28T01:40:48.090 回答
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;
}
于 2013-06-28T01:16:26.960 回答
1

这里发生了一些事情：

  1. 元素的默认“高度”是 auto*
  2. 当“父”元素（body、html）的高度为自动时，结果高度是根据子元素的自然高度计算的*
  3. 孩子的身高“100%”将搜索明确的父母身高。
  4. 如果元素的所有父级都具有自动或百分比高度，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 hack 的读者会注意到，这是对虚假列的丑陋扩展。

它很丑，因为它创建了一个备用的 html 元素。

但是因为它只涉及将一个元素从流控制中拉出来，所以您不必担心添加更多内容对孩子身高和定位父母之间不稳定的互动的影响。

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

于 2013-06-28T02:01:05.563 回答