Question

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

<!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％。我怎样才能做到这一点？如果我把400px放在高处，它就可以了。那么为什么不是70％呢？任何想法如何实现这一目标？

Answer 1

您只需更新html即可获得100％的身高（以及body）：

html, body { height: 100%; }

（JSFiddle）

这是因为100%始终相对于父容器（body的{{1}}）。

一个helpful post on the topic is here。 FTA：

首先，我们需要为html和body标签提供100％的高度。这经常被忽视，但是没有元素会是非常重要的调整到百分比高度，除非它知道它的父高度目前正在占领。由于容器是身体的后代标签是html标签的后代，那么这是必需的。

Answer 2

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

html{
    height:100%;
}

Check here

将div的高度设置为70％

2 个答案: