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
