diff --git a/src/Core/Components/MainLayout/FluentMainLayout.razor b/src/Core/Components/MainLayout/FluentMainLayout.razor
index 55535b693b..116610820a 100644
--- a/src/Core/Components/MainLayout/FluentMainLayout.razor
+++ b/src/Core/Components/MainLayout/FluentMainLayout.razor
@@ -7,17 +7,20 @@
         @Header
     </FluentHeader>
 
-    @SubHeader
+    <FluentStack Orientation="Orientation.Vertical" VerticalGap="0" Style="height: 100%;">
 
-    <FluentStack Orientation="Orientation.Horizontal" style="height:calc(100% - var(--header-height))" HorizontalGap="0">
-        @if (NavMenuContent != null)
-        {
-            <FluentNavMenu Width="@NavMenuWidth" Collapsible="true" Class="main-layout-navmenu" Title="@NavMenuTitle">
-                @NavMenuContent
-            </FluentNavMenu>
-        }
-        <FluentBodyContent>
-            @Body
-        </FluentBodyContent>
+        @SubHeader
+
+        <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="0" Style="height: 100%;">
+            @if (NavMenuContent != null)
+            {
+                <FluentNavMenu Width="@NavMenuWidth" Collapsible="true" Class="main-layout-navmenu" Title="@NavMenuTitle">
+                    @NavMenuContent
+                </FluentNavMenu>
+            }
+            <FluentBodyContent>
+                @Body
+            </FluentBodyContent>
+        </FluentStack>
     </FluentStack>
-</FluentLayout>
\ No newline at end of file
+</FluentLayout>
diff --git a/src/Core/Components/MainLayout/FluentMainLayout.razor.cs b/src/Core/Components/MainLayout/FluentMainLayout.razor.cs
index 87688dce19..179642fba4 100644
--- a/src/Core/Components/MainLayout/FluentMainLayout.razor.cs
+++ b/src/Core/Components/MainLayout/FluentMainLayout.razor.cs
@@ -10,7 +10,6 @@ public partial class FluentMainLayout : FluentComponentBase
 
     protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("--header-height", $"{HeaderHeight}px", () => HeaderHeight.HasValue)
-        .AddStyle("height", $"calc(100% - {HeaderHeight}px)")
         .Build();
 
     /// <summary>
diff --git a/tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.FluentMainLayout_Default.verified.html b/tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.FluentMainLayout_Default.verified.html
index 6b813fed9f..9c732e7315 100644
--- a/tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.FluentMainLayout_Default.verified.html
+++ b/tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.FluentMainLayout_Default.verified.html
@@ -1,27 +1,29 @@
 
-<div class="layout" style="height: calc(100% - px);" b-emdrz8ckod="" blazor:elementreference="xxx">
-  <header class="header" b-wxpnc5dx1o="" blazor:elementreference="xxx">
-    <div class="header-gutters" b-wxpnc5dx1o="">
-      <b>render me</b>
-    </div>
-  </header>
-  <b>render me</b>
-  <div class="stack-horizontal" style="justify-content: start; align-items: start; column-gap: 0px; row-gap: 10px; width: 100%; height:calc(100% - var(--header-height));" b-0nr62qx0mz="">
-      <fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js" style="display:none;"></fluent-page-script>
-    <div id="xxx" class="main-layout-navmenu fluent-nav-menu" style="width: 320px;" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">
-      <div aria-expanded="true" role="menuitem" class="fluent-nav-item expander" tabindex="0" blazor:onclick="1" blazor:onkeydown="2" b-vs37bumpa7="">
-        <div class="positioning-region" b-vs37bumpa7="">
-          <div class="content-region" b-vs37bumpa7="">
-            <svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="3">
-              <path d="M2.75 18h18.5a.75.75 0 0 1 .1 1.5H2.75a.75.75 0 0 1-.1-1.5h18.6-18.5Zm0-6.5h18.5a.75.75 0 0 1 .1 1.5H2.75a.75.75 0 0 1-.1-1.5h18.6-18.5Zm0-6.5h18.5a.75.75 0 0 1 .1 1.5H2.75a.75.75 0 0 1-.1-1.49h18.6-18.5Z"></path>
-            </svg>
-          </div>
+<div class="layout" b-emdrz8ckod="" blazor:elementreference="xxx">
+    <header class="header" b-wxpnc5dx1o="" blazor:elementreference="xxx">
+        <div class="header-gutters" b-wxpnc5dx1o="">
+            <b>render me</b>
+        </div>
+    </header>
+    <div class="stack-vertical" style="align-items: start; justify-content: start; column-gap: 10px; row-gap: 0px; width: 100%; height: 100%;" b-0nr62qx0mz="">
+        <b>render me</b>
+        <div class="stack-horizontal" style="justify-content: start; align-items: start; column-gap: 0px; row-gap: 10px; width: 100%; height: 100%" b-0nr62qx0mz="">
+            <fluent-page-script src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js" style="display:none;"></fluent-page-script>
+            <div id="xxx" class="main-layout-navmenu fluent-nav-menu" style="width: 320px;" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">
+                <div aria-expanded="true" role="menuitem" class="fluent-nav-item expander" tabindex="0" blazor:onclick="1" blazor:onkeydown="2" b-vs37bumpa7="">
+                    <div class="positioning-region" b-vs37bumpa7="">
+                        <div class="content-region" b-vs37bumpa7="">
+                            <svg style="width: 20px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="3">
+                                <path d="M2.75 18h18.5a.75.75 0 0 1 .1 1.5H2.75a.75.75 0 0 1-.1-1.5h18.6-18.5Zm0-6.5h18.5a.75.75 0 0 1 .1 1.5H2.75a.75.75 0 0 1-.1-1.5h18.6-18.5Zm0-6.5h18.5a.75.75 0 0 1 .1 1.5H2.75a.75.75 0 0 1-.1-1.49h18.6-18.5Z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <b>render me</b>
+            </div>
+            <div class="body-content" b-9l28a7kahd="" blazor:elementreference="xxx">
+                <b>render me</b>
+            </div>
+        </div>
         </div>
-      </div>
-      <b>render me</b>
-    </div>
-    <div class="body-content" b-9l28a7kahd="" blazor:elementreference="xxx">
-      <b>render me</b>
     </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.cs b/tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.cs
index a18a99e611..8db255bff5 100644
--- a/tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.cs
+++ b/tests/Core/_ToDo/MainLayout/FluentMainLayoutTests.cs
@@ -36,5 +36,35 @@ public void FluentMainLayout_Default()
         //Assert
         cut.Verify();
     }
+
+    [Fact]
+    public void FluentMainLayout_MainContent_Should_HaveCorrectHeight()
+    {
+        //Arrange
+        int? headerHeight = 60;
+        var expectedHeightStyle = $"height: 100%;";
+        var header = "<b>render me</b>";
+        var subHeader = "<b>render me</b>";
+        var navMenuContent = "<b>render me</b>";
+        var body = "<b>render me</b>";
+        string navMenuTitle = default!;
+        var navMenuWidth = 320;
+        var cut = TestContext.RenderComponent<FluentMainLayout>(parameters => parameters
+            .Add(p => p.Header, header)
+            .Add(p => p.SubHeader, subHeader)
+            .Add(p => p.HeaderHeight, headerHeight)
+            .Add(p => p.NavMenuTitle, navMenuTitle)
+            .Add(p => p.NavMenuContent, navMenuContent)
+            .Add(p => p.NavMenuWidth, navMenuWidth)
+            .Add(p => p.Body, body)
+        );
+        //Act
+        var fullContentStack = cut.FindComponent<FluentStack>();
+        var mainContentStack = fullContentStack.FindComponent<FluentStack>();
+
+        //Assert
+        Assert.Equal(expectedHeightStyle, fullContentStack.Instance.Style, StringComparer.Ordinal);
+        Assert.Equal(expectedHeightStyle, mainContentStack.Instance.Style, StringComparer.Ordinal);
+    }
 }