Question

我正在制作的页面上有一个关于CSS的噩梦。我有两个div标签标题和主要内容标题设置为250px的高度，然后主要设置为100％的高度。我还将html和body的高度设置为100％，以便在页面中将容器设置为100％时解决问题。

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

HTML CODE ：

<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 {
    height:100%;0
}

body {
    height:100%;
}

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

div.content {
    width:100%;
    height:100%;
}

任何人都可以帮我把所有这一切设置在一个页面的最大尺寸，没有滚动条，高度为100％。

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

Answer 2

不幸的是，当涉及到高度时，在创建250px高标题分区后，100％不会自动扩展以填充页面的剩余高度。高度设置为100％，高于250px。因此标题分区可能出现在窗口的高度，然后标题将其向下推250px。

默认情况下，正文也应该有一个边距（8px）。我不知道他们是否改变了HTML4或XHTML，但这就是HTML4的含义。请记住，元素的高度不包括元素的边距和填充，它们最后会一起添加。

你应该能够将它们放到100％高度的另一个分区并使其正常工作，但你很可能会发现由于身体上的边缘，页面仍然延伸超过屏幕16px。 / p>

建议：不要担心100％的页面高度。当您的网站“完成”时，应该有足够的内容，无论如何您都不需要处理100％的页面高度。如果没有，那么你应该考虑组合页面，使它们到达窗口的底部。如果您需要一些填充文本进行测试，请尝试Lorem Ipsum。我还没有遇到真正的场景，其中有人实际上需要100％的页面高度来构建它们。

HTML CSS高度100％扩展超出页面大小

2 个答案: