HTML CSS 高度 100% 扩展超出页面大小答案

【问题标题】：HTML CSS Height 100% expanding beyond the size of the pageHTML CSS 高度 100% 扩展超出页面大小
【发布时间】：2012-07-22 18:05:21
【问题描述】：

我正在处理的页面上的 CSS 有点像噩梦。我有两个 div 标签，一个标题和一个主要内容，标题设置为 250px 的高度，然后将主要设置为 100% 的高度。我还将 html 和 body 的高度也设置为 100%，以满足页面中容器设置为 100% 的问题。

问题是我现在有一个页面超出了浏览器的大小并显示了滚动条，我不想删除滚动条，因为页面可能超出了浏览器的大小。

HTML 代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page Height 100% Issue</title>

<link href='../style/test.css' rel='stylesheet' type='text/css' />

</head>

<body>

<div class='head'>Header</div>

<div class='content'>Main Content</div>

</body>
</html>

CSS：


html {
    高度:100%;0
}

身体 {
    高度：100%；
}

div.head {
    宽度：100%；
    高度：250px；
}

div.内容{
    宽度：100%；
    高度：100%；
}

谁能帮我把这一切都放在一个页面上，设置为没有滚动条的页面的最大尺寸，高度为 100%。

【问题讨论】：

尝试在body上设置margin: 0？
不，对不起，我试过没有效果。

标签： html css

【解决方案1】：

您在div.content 上设置了 100% 的高度，这将占用其容器元素 (body) 的 100%。所以body的整体高度将是100% + 250px（div.head的高度），这不是你想要的。

添加一个包含 div 并设置高度是最好的方法，我已经测试了这段代码，它似乎可以工作：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test Page Height 100% Issue</title>

    <style type="text/css">
    html {
        height:100%;
    }

    body {
        height:100%;
     margin:0;
    }

    div.head {
        width:100%;
        height:250px;
    }

    div.container{

        height:100%;
    }

    div.content {
        width:100%;
    }
    </style>

    </head>

    <body>
        <div class="container">
            <div class='head'>Header</div>

            <div class='content'>Main Content</div>
        </div>
    </body>

    </html>

【讨论】：

【解决方案2】：

不幸的是，在高度方面，在创建 250px 高的标题分区后，100% 不会自动扩展以填充页面的剩余高度。在 250px 的顶部，高度实际上设置为 100%。所以标题分区可能出现在窗口的高度，然后标题将其向下推 250px。

默认情况下，body 也应该有一个边距（8px）。我不知道他们是否将其更改为 HTML4 或 XHTML，但这就是 HTML4 的内容。请记住，元素的高度不包括元素的边距和内边距，它们最终会加在一起。

您应该能够将它们都放在高度为 100% 的另一个分区中并使其正常工作，但您很可能会发现由于正文的边距，页面仍然超出屏幕 16 像素。

一个建议： 不要担心 100% 的页面高度。当您的网站“完成”时，上面应该有足够的内容，无论如何您都不需要处理 100% 的页面高度。如果没有，那么您应该考虑合并页面，以便它们确实到达窗口的底部。如果您需要一些填充文本来测试它，请尝试Lorem Ipsum。我还没有遇到过一个真实场景，有人实际上需要 100% 的页面高度来存放他们的元素。

【讨论】：