代码之家 › 专栏 › 技术社区 › Elle H

CSS元素100%父级

height xhtml css html

Elle H · 技术社区 · 16 年前

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

我开始相信这是正确的行为,只是不起作用,但我想我应该先问一下集体智慧,然后再彻底检查方法。

3 回复 | 直到 16 年前

Brock Adams 16 年前

是的,你可以用 overflow: hidden;

我不认为上帝希望页面只有一屏高

还是允许使用垂直滚动条? http://matthewjamestaylor.com/blog/perfect-full-page.htm

Jamie Wong 16 年前

我不太清楚你想要达到什么目的,但是:

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

没有道理。您无法控制body元素的高度,因为它包含其他所有内容,html元素甚至没有以相同的方式“显示” div span 元素是。

你所描述的行为确实是预期的结果。每当您将一个元素的高度/宽度设置为100%时,它就意味着父元素的100%(除了某些可能的例外情况,该元素是绝对定位的)。

Kasumi 16 年前

你的css表现得和预期完全一样。。。

如果您使用一个小java脚本来找出屏幕的高度,然后第一个inner div,然后将第二个inner div设置为差值,那么就容易多了。

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

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

推荐文章

Gustavo Moreira Vieira · 安卓工作室-填补剩余空白(高度?)

8 年前

JR3652 · 反应滑溜高度问题

8 年前

Nicola Spadari · Bootstrap 4.0.0 modal carousel相册动画调整大小错误

8 年前

James Pointer · 锚标签未填充高度和宽度

8 年前

Tom O'Sullivan · 如何确定屏幕高度和宽度

8 年前

MrO · 如何使div的宽度与屏幕高度相同?

8 年前

Osama Naeem · UITextView高度在键入/不使用情节提要时动态更改

8 年前

The Garrus · 使用javascript调整滑块大小

8 年前

Vali RO · 即使将宽度和高度设置为100,也会显示滚动条

8 年前

Jonny DOe · 为仅div css设置相同的高度和响应能力

8 年前