.NET MAUI WebView内嵌长页面：底部菜单显示位置适配问题

问题场景：用.NET MAUI的WebView加载一个超长页面，页面里有个通过顶部菜单触发的底部菜单——在普通浏览器里这个菜单会固定在窗口底部，但在APP里必须滚动到页面最底端才能看到。要让这个菜单直接显示在屏幕底部，无需滚动页面。

核心原因 #

原XAML布局把WebView嵌套在ScrollView里，导致WebView的高度被拉伸成页面内容的总高度，而非屏幕可视区域的高度。同时HTML的高度设置也需要配合调整，才能让菜单固定在视口底部。

修改步骤 #

1. 调整XAML布局

去掉外层多余的ScrollView和VerticalStackLayout，让WebView直接填充整个Grid，确保WebView的高度等于屏幕可视高度：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xyz.MainPage">

    <Grid ColumnDefinitions="*"
          ColumnSpacing="0"
          RowDefinitions="*"
          RowSpacing="0">
        <!-- 直接放置WebView，去除不必要的嵌套容器 -->
        <WebView Source="https://files.xyz.net/index.html"
                 HorizontalOptions="FillAndExpand"
                 VerticalOptions="FillAndExpand"/>
    </Grid>
</ContentPage>

2. 调整HTML的CSS设置

确保页面根元素高度绑定到视口高度，同时给底部菜单添加固定定位（如果菜单由JS生成，需确保样式被正确设置）：

修改后的HTML代码：

<html>
<head>
    <style>
        /* 让根元素高度匹配视口高度 */
        html, body {
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: auto; /* 让页面内容内部滚动，而非依赖外层容器 */
        }
        #one2go {
            width: 100% !important;
        }
        /* 给底部菜单添加固定定位，根据实际菜单ID/类名调整选择器 */
        #bottom-menu {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 999; /* 确保菜单显示在页面内容上层 */
        }
    </style>
</head>
<body>
<script src="test.js" data-formtarget="_self" data-xyz="357278" data-color="blue" data-language="en" data-width="250" data-height="251" data-border="1" data-hidelogo="1" data-domain="xyz.asia"></script>
</body>
</html>

补充说明 #

如果底部菜单是由test.js动态生成的，可通过WebView的EvalAsync方法在页面加载完成后注入样式，强制设置固定定位：

在MainPage的代码后台添加事件处理：

// WebView加载完成后执行样式注入
private async void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
    var webView = sender as WebView;
    // 根据实际菜单的类名/ID修改选择器
    await webView.EvalAsync(@"
        var menu = document.querySelector('.bottom-menu');
        if(menu) {
            menu.style.position = 'fixed';
            menu.style.bottom = '0';
            menu.style.left = '0';
            menu.style.width = '100%';
            menu.style.zIndex = '999';
        }
    ");
}

同时在XAML的WebView上绑定Navigated事件：

<WebView Source="https://files.xyz.net/index.html"
         HorizontalOptions="FillAndExpand"
         VerticalOptions="FillAndExpand"
         Navigated="WebView_Navigated"/>

内容的提问来源于stack exchange，提问作者Bjørn Hellesylt