CSS 元素 100% 的父元素答案

【问题标题】：CSS Element 100% of ParentCSS 元素 100% 的父元素
【发布时间】：2010-06-24 13:39:17
【问题描述】：

我很难获得 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 css xhtml height

【解决方案1】：

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

我不认为上帝打算让页面恰好只有一屏高。 :-)

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

【讨论】：

【解决方案2】：

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

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

没有意义。您无法控制 body 元素的高度，因为它无论如何都包含其他所有内容，而且 html 元素甚至不会以与 div 和 span 元素相同的方式“显示”。

您所描述的行为确实是预期会发生的事情。每当您将元素的高度/宽度设置为 100% 时，这意味着 100% 的父元素（元素绝对定位的一些可能的例外情况）。

【讨论】：

【解决方案3】：

你的 css 的行为完全符合预期......

只有 css 没有确切的方法可以做到这一点，没有 brock 所说的，非常复杂的浮动

如果你用一个小的java脚本找出屏幕的高度，第一个inner div，然后将第二个inner div设置为差值，会容易得多。

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

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

【讨论】：