CSS 元素 100% 的父元素

发布于 2024-09-07 04:23:43 字数 932 浏览 7 评论 0原文

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

我开始相信这只是正确的行为，但行不通，但我想在彻底修改方法之前我应该先征求集体智慧。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空气里的味道 2024-09-14 04:23:43

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

我不认为上帝打算让页面只有一个屏幕那么高。 :-)

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

回复收藏 0 原文

秋日私语 2024-09-14 04:23:43

我不太确定你想要完成什么，但这：

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

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

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

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).

回复收藏 0 原文

娇纵 2024-09-14 04:23:43

你的CSS只是表现得完全符合预期...

没有确切的方法只用CSS来做到这一点，没有布罗克所说的，非常复杂的浮动< - 根据定义，浮动需要知道固定的高度和宽度，并且不是动态的。（实际上大多数浏览器都会尝试猜测）

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

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

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

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>

回复收藏 0 原文

~没有更多了~