Blazor应用中无法控制iframe高度，如何设置固定高度或铺满页面？

方案1：让iframe铺满整个页面 #

通过CSS设置iframe占满视口高度，同时去除默认边框、消除布局间隙：

@page "/admin/swagger"
@*@attribute [Authorize(Roles = "Admin")]*@
@*@attribute [Authorize]*@

<style>
    .full-swagger-iframe {
        width: 100%;
        height: 100vh; /* 占满整个浏览器视口高度 */
        border: none; /* 移除iframe默认边框 */
        display: block; /* 消除底部可能出现的空白间隙 */
    }
</style>

<iframe src="swagger" class="full-swagger-iframe"></iframe>

如果页面存在顶部导航栏，可通过calc计算高度避免被遮挡（假设导航栏高度为60px）：

.full-swagger-iframe {
    width: 100%;
    height: calc(100vh - 60px); /* 减去导航栏高度 */
    border: none;
    display: block;
}

方案2：设置固定高度 #

直接指定iframe的固定高度，同时保持宽度铺满容器：

@page "/admin/swagger"
@*@attribute [Authorize(Roles = "Admin")]*@
@*@attribute [Authorize]*@

<style>
    .fixed-swagger-iframe {
        width: 100%;
        height: 900px; /* 自定义固定高度 */
        border: none;
        display: block;
    }
</style>

<iframe src="swagger" class="fixed-swagger-iframe"></iframe>

补充说明 #

• 若iframe内部的Swagger页面出现滚动条，属于正常现象，Swagger内容较多时会自动生成滚动；
• 确保页面的父容器（比如Blazor布局中的主内容区）没有设置限制高度的样式，否则iframe的高度设置可能不生效。

内容的提问来源于stack exchange，提问作者Darkmatter5