Question

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

我开始相信，这只是正确的行为，只是行不通，但我想在检修方法之前先问集体智慧。

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表现得与预期一致...

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

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

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

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

CSS元素100％的父级

3 个答案: