Html CSS元素100%为父元素_Html_Css_Xhtml_Height

Html CSS元素100%为父元素

html css

Html CSS元素100%为父元素,html,css,xhtml,height,Html,Css,Xhtml,Height,我很难获得100%的页面高度，包括包含的div。似乎发生了这样的情况：内部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.dt

我很难获得100%的页面高度，包括包含的div。似乎发生了这样的情况：内部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>

我开始相信这只是正确的行为，根本不起作用，但我想在彻底检查方法之前，我应该先问一下集体智慧。

我不太确定你想要实现什么，但这：

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

没有道理。您无法控制body元素的高度，因为它包含其他所有内容，而且html元素的显示方式甚至与div和span元素的显示方式不同

你所描述的行为确实是预期会发生的。每当您将一个元素的高度/宽度设置为100%时，它就意味着父元素的100%，在元素绝对定位的情况下，可能会出现一些例外情况。

是的，您可以使用overflow:hidden；或者开始玩花车和清除

我认为上帝并没有打算让页面只有一个屏幕高-

还是允许使用垂直滚动条？

如果是这样的话，那么您可能会发现：

URCSS的行为完全符合预期

如果没有brock所说的非常复杂的float，那么仅仅使用css是无法做到这一点的

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

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