ASP.Net Core - Razor WebApp - strange behavior when Page contains an IFrame

Question

I have just made a new ASP.Net Core 3.1 Razor WebApplication. Then I add a new Razor page called Test.cshtml:

@page
@model StackOverflow.Pages.TestModel
@{
    ViewData["Title"] = "Page with IFrame";
}
<h1 class="display-4 text-center">@ViewData["Title"]</h1>
<div>
    <iframe frameborder="0" heigth="100%" width="100%" style="height:600px"/>
</div>

and then I add a link to this new page in _Layout.cshtml:

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/Test">Test</a>
</li>

In the _Layout.cshtml is a @RenderBody where the content of the Page should be visible - and then a footer below.

<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2022 - StackOverflow - <a asp-area="" asp-page="/Privacy">Privacy</a>
    </div>
</footer>

When running the Website - the Test page show up fine - with an empty Iframe - but the Footer, that is present when viewing the other pages - is not visible when showing the Test page with the IFrame inside.

Just wondering why?

Answer 1

<iframe frameborder="0" heigth="100%" width="100%" style="height:600px"/>

The issue relates the iframe tag, try to modify it as below:

<iframe frameborder="0" heigth="100%" width="100%" style="height:600px"></iframe>

Then, the result is like this: