CSS Element 100% of Parent_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-05 01:03 出处：网络

I\'m having difficulty getting a 100% page height including contained divs.What seems to happen is that the inner div expands to 100% the height of the entire parent element, and not just to the botto

I'm having difficulty getting a 100% page height including contained divs. What seems to happen is that the inner div expands to 100% the height of the entire parent element, and not just to the bottom, even if it's been displaced by an element above it, so the child overflows the parent.

<?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>

I'm beginning to believe that simply this is simply the correct behaviour and just doesn't work, but I figured I'd ask the collective intelligence first before开发者_高级运维 overhauling the approach.

Yeah, you can use overflow: hidden; or start playing with floats and clears.

I don't think God intended for pages to just be exactly one screen high. :-)

Or is a vertical scrollbar allowed? If so, then you might check out: http://matthewjamestaylor.com/blog/perfect-full-page.htm

I'm not exactly sure what you're trying to accomplish, but this:

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

Doesn't make sense. You can't control the height of the body element, as it contains everything else regardless, and the html element isn't even "displayed" in the same way div and span elements are.

The behaviour you describe is, indeed, what is expected to happen. Whenever you set an element's height/width to 100%, it means 100% of the parent element (with some possible exceptions where the element is absolutely positioned).

ur css is just behaving exactly as intended...

there is no exact way to do this with just css, without what brock said, very complicated float <-- and by the definition, floats need to know the fixed height and width, and is not dynamic. (In practice most browser will try to guess)

It is much easier if you use a little java script to find out the height of the screen, and first inner div, then set the second inner div to be the difference.

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

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