Home/ Questions/Q 9012181
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T02:55:54+00:00

I have a super simple page: <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8 />

  • 0

I have a super simple page:

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

and the css:

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

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

*
{
    margin: 0px auto;
}

I want the div height to be 70% of screen. How can I achieve that? If I put 400px in height, it works. So why not 70%? Any ideas how to achieve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just need to update html to have a 100% height (as well as body):

    html, body { height: 100%; }

    (JSFiddle)

    This is because 100% is always relative to the parent container (for body that’s html).

    One helpful post on the topic is here. FTA:

    First, we need to give 100% height to both the html and the body tag.
    This is often overlooked but is vitally important as no element will
    adjust to a percentage height unless it knows what it’s parent height
    is currently occupying. As the container is a descendant of the body
    tag which is a descendant of the html tag, then this is required.

    • 0