Blazor css doesn't honor height calc(100%);

This question is WHY DOES BLAZOR work differently. NOT how to make an item 100% tall.

EDITUPDATE: The same css hand coded into an HTML file works as desired. The same css in Blazor doesn't.

I have a test HTML page that shows a div full height.

But when applied to blazor, the css doesn't work. I can't find any documentation that explains this behavior.

It looks like calc(100%) doesn't work in blazor.

<html>
    <head>
        <style>
        body {
            color: rgb(170, 170, 170);
            background-color: rgb(0, 0, 0);
            font-family: Georgia, 'Times New Roman', Times, serif;
        }
        .container {
            height: calc(100%);
            background-color: red;
            margin: 0;
            padding: 0;
        }
        </style>
    </head>
    <body>
        <div class="container">container
        </div>
    </body>
</html>

Hand Coded HTML

MainLayout.razor

@inherits LayoutComponentBase

<div class="container">container
</div>

app.css

body {
    color: rgb(170, 170, 170);
    background-color: rgb(0, 0, 0);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.container {
    height: calc(100%);
    background-color: red;
    margin: 0;
    padding: 0;
}

Blazor app

Solution

Not sure what does Blazor do for its build-in framework. To achieve you requirement, you can explicitly set the height of the html and body elements to 100%/100vh in your CSS to ensure that the container div can take the full height.

html,body {
    height: 100vh;
    color: rgb(170, 170, 170);
    background-color: rgb(0, 0, 0);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.container {
    height: calc(100%);
    background-color: red;
    margin: 0;
    padding: 0;
}

If you also need the width to be full width, you need add max-width:100%;:

.container {
    max-width:100%;
    height: calc(100%);
    background-color: red;
    margin: 0;
    padding: 0;
}