Blazor-带有OSM的单页

我正在尝试使用Blazor和OSM使用BlazorLeaflet-NuGet包创建一个简单的web地图。一个单一的页面，将100%覆盖OSM地图。当宽度和高度值固定为特定值时，所有值都能正常工作。然而，当我尝试将宽度和高度属性设置为100%时，页面是完全空白的。

主布局.razor

@inherits LayoutComponentBase
@Body

索引.razor

@page "/"
@using System.Drawing
@using BlazorLeaflet
@using BlazorLeaflet.Models
@using BlazorWebMap.Data
@inject IJSRuntime jsRuntime
<div id="map">
<LeafletMap Map="_map" />
</div>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
@code
{
private Map _map;
protected override void OnInitialized()
{
_map = new Map(jsRuntime)
{
Center = _startAt,
Zoom = 12.2f
};
_map.OnInitialized += () =>
{
_map.AddLayer(new TileLayer
{
UrlTemplate = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
Attribution = "&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors",
});
};
}
private LatLng _startAt = new LatLng(53.13344f, 23.15026f);
}

我知道只使用HTML是可以做到的，但我想用Blazor来做，这是我应用程序的起点。