使"main"类div用Razor填充整个页面

Question

我的第一个.NET Core Blazor平台项目比我想象的要难。

该项目立即创建了MainLayout.razor文件。我正试图修改"；主"；阶级，所以它会填满整个页面，但没有成功。我现在有什么：

<div class="main mh-100 p-0" style="background-color:#1100ff">
<nav class="navbar">
<label class="navbar-brand">My Project</label>
</nav>
<div class="container p-0 align-self-center" style="background-color:#ff99ff">
<div class="content">
@Body
</div>
</div>
</div>

我认为mh-100应该强制最大高度达到100%。我们非常感谢任何帮助，如果还有其他类似的问题，我会提前道歉。

Answer 1

因此，这不是blazor问题，与blazor的工作方式无关，但如果应用正确的css样式，它将解决您的问题。你要做的就是应用屏幕的高度。看看什么是css单元，什么最适合你：https://www.w3schools.com/cssref/css_units.asp

在您的情况下，您需要视口的高度：

div {
height: 100vh;
}

示例：https://codepen.io/umair_me/pen/oNxovxX

在引导程序中，您可以将min-vh-100或vh-100用于引导程序4.2+版本。更多详情点击此处

Answer 2

我不认为这真的是Blazor类型的问题，而是HTML/CSS问题。除了bootstrap之外，如果您在样式标签中添加width:100%;，这应该可以解决问题。

问题还可能是，您将最大高度设置为100%，您应该查看(正常(高度。