CSS元素父元素的100％

Question

我很难获得包括所包含的divs在内的100％的页面高度。 似乎发生的是，内部div会扩展到整个父元素的高度的100％，而不仅仅是到底部，即使它已被其上方的元素移位，因此子对象也会溢出父对象。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Home</title>
    <style type="text/css">
    html, body, #container, #content
    {
        height: 100%;
        min-height: 100%;
    }

    html { border: 1px solid red; }
    #content { border: 1px solid blue; }
    </style>
</head>
<body>
    <div id="container">
        <h2>Test</h2>

        <div id="content">
            <p>Testing</p>
        </div>
    </div>
</body>
</html>

我开始相信，这仅仅是正确的行为，并且行不通，但是我认为，在对方法进行大修之前，我会先询问集体智慧。

Answer 1

我不确定您要完成什么，但这是：

html, body
{
    height: 100%;
    min-height: 100%;
}

没道理 您无法控制body元素的高度，因为它包含其他所有元素，而且html元素甚至都无法像div和span元素一样“显示”。

您描述的行为确实是预期发生的事情。 每当您将元素的高度/宽度设置为100％时，即表示父元素的100％（绝对定位该元素时可能会有一些例外）。

Answer 2

是的，您可以使用overflow: hidden; 或开始使用浮动和清除。

我认为上帝不希望页面正好是一个屏幕的高度。 :-)

还是允许垂直滚动条？ 如果是这样，那么您可以签出： http : //matthewjamestaylor.com/blog/perfect-full-page.htm

Answer 3

您的CSS的行为完全符合预期...

没有brock所说的，没有css的确切方法，非常复杂的float <-根据定义，float需要知道固定的高度和宽度，并且不是动态的。 （实际上，大多数浏览器都会尝试猜测）

如果使用一些Java脚本来找出屏幕的高度和第一个内部div，然后将第二个内部div设置为差值，则容易得多。

<div id="container">
        <div id=content-top">
        <h2>Test</h2>
        </div>

        <div id="content">
            <p>Testing</p>
        </div>
    </div>