0

我有一个超级简单的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />   
    <link rel="stylesheet" href="@Url.Content("~/ui/all.min.css")" type="text/css" />
</head>
<body>   
    <div class="header">

</div>

</body>
</html>

和CSS：

.header
{
    height:70%;
    width:100%;
    background:#990663;
}

body
{
    margin:0px;
    padding: 0px;
    height:100%;
    width:100%;
}

*
{
    margin: 0px auto;
}

我希望 div 高度为屏幕的 70%。我怎样才能做到这一点？如果我把高度设置为 400 像素，它就可以工作。那么为什么不是70%呢？任何想法如何实现这一目标？

4

2 回答 2

3

您只需要更新html以具有 100% 的高度（以及body）：

html, body { height: 100%; }

( JSFiddle )

这是因为100%总是相对于父容器（对于body那个html）。

关于该主题的一篇有用的帖子在这里。自由贸易协定：

首先，我们需要为 html 和 body 标签提供 100% 的高度。这通常被忽略，但非常重要，因为除非它知道它的父高度当前占据什么，否则任何元素都不会调整到百分比高度。由于容器是body标签的后代，而body标签是html标签的后代，所以这是必需的。

于 2012-12-18T12:07:53.890 回答
1

只需将 100% 添加到 HTML 的高度，您就可以对其进行排序。

html{
    height:100%;
}

在这里检查

于 2012-12-18T12:08:00.997 回答