BootStrapBlazor升级导致的div高度100%失效的解决

仅做为记录，在BootStrapBlazor版本为8.3.10及以前时，组件中最外层div设置高度为100%时，可以获取到正常的高度，在里面的两个div中，一个设置固定的高度，另一个采用绝对定位，不设置高度，便可以实现充满浏览器全屏的功能，固定高度的div用于查询增加之类的文本框和按钮，绝对定位的div用于放一个显示查询结果的表格组件。

但是不能升级，如果升级到新版本后，最外层的div高度为100%时就无效，只会显示最小的高度，只关注里面的div部分即可，示例代码下：

<div style="position:relative;height:100%;">
	<div style="height:60px;">
		<GroupBox hidden="@isShow">
			<div class="row g-3 form-inline">
				<div class="col-12 col-sm-1">
					<BootstrapInput @bind-Value="@name" PlaceHolder="员工姓名..." maxlength="8" ShowLabel="false" />
					
				</div>
				<div class="col-12 col-sm-2">
					<DateTimeRange Value="@kq_date" ShowToday="true" />
				</div>

				<div class=" btn-group col-12 col-sm-2">
					<Button Text="搜索" OnClick="QueryBtn" Color="Color.Success" Icon="fas fa-arrows-rotate"></Button>
					<Button Text="重置" OnClick="ResetBtn" Color="Color.Warning" Icon="fas fa-eraser"></Button>
				</div>
			</div>
		</GroupBox>
		<Alert Color="Color.Primary" hidden="@isError">没有权限,如需要使用此功能请联系管理员！</Alert>
	</div>
	<div style="position:absolute;top:60px;bottom:5px;">
		<Table TItem="KaoQin" PageItemsSource="PageItemsSource" IsFixedHeader="true" ShowSearch="false" ShowEmpty="true" SearchMode="SearchMode.Top" ShowSearchButton="false" hidden="@isShow"
			   IsPagination="true" AllowResizing="false" ShowColumnList="true" EmptyText="亲,没有查询到需要的数据！" @ref="Table" HeaderStyle="TableHeaderStyle.Dark"
			   IsStriped="true" IsBordered="true" DoubleClickToEdit="false" AllowDragColumn="true" ShowToastAfterSaveOrDeleteModel="false"
			   ShowAddButton="true" ShowEditButton="@isEdit" ShowDeleteButton="false" EditModalTitle="保存更改"
			   ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false" EditDialogIsDraggable="false" EditDialogSize="Size.Large" AddModalTitle="增加新的资料"
			   OnQueryAsync="@OnSerchAsync">
			<TableColumns>
				<TableColumn @bind-Field="@context.姓名" Text="姓名" Align="Alignment.Center" />
				<TableColumn @bind-Field="@context.打卡方式" Text="打卡方式" Align="Alignment.Center" />
				<TableColumn @bind-Field="@context.打卡时间" Text="打卡时间" Align="Alignment.Center" FormatString="yyyy-MM-dd hh:mm:ss" />
				<TableColumn @bind-Field="@context.工号" Text="工号" Align="Alignment.Center" />
				<TableColumn @bind-Field="@context.部门" Text="部门" Align="Alignment.Center" />
			</TableColumns>
		</Table>
	</div>
</div>

这个示例代码本身没有问题，也不需要修改，网上找了找原因，说是需要对外层的body、html设置高度后才可以。

对于Blazor页面来说，它的外层就是默认的那个模版文件，那我们在模版文件中设置好外层元素的高就可以了，结果发现设置了body、html后不起作用，只能按F12键审查网页元素，看一下页面的上一层元素叫什么。

发现它的外层div的类名是tabs-body-content，那就直接在模板文件中设置这个的高度为100%，试一下效果

.tabs-body-content
{
    height:100%;
    margin:0;
}

增加上这段样式文件后，发现界面布局又恢复正常了，可以给Div加上颜色来查看它的实际大小，刚开始还以为是里面的那个绝对定位的div失效导致的了，折腾了好久。