css - 表单布局在移动设备上不灵活

Question

我正在我的移动设备（华为 p30 pro）上测试我的 vaadin 应用程序的注册屏幕。对于注册过程，我使用表单“铁形式”元素。我把它放到垂直布局中。一般来说，屏幕上总是有一个导航栏。在桌面视图中，导航栏出现在顶部，而在移动设备上，它出现在屏幕底部。但是，当我打开键盘（Android 的软键盘）时，导航栏被向上推到屏幕顶部，并且注册表单的垂直布局表现不佳，因为我无法在垂直布局内滚动。例如，当我打开键盘时，如果我向下注册按钮，我无法向上滚动到屏幕顶部的用户名文本字段。导航栏与视图重叠（在第二张图中实现，电子邮件字段上方的文本字段不可见且不可滚动）。我该如何解决这个问题？提前致谢..

打开键盘后

我的注册页面如下所示：

@Route(value = "registration", layout = MainView.class)
@RouteAlias(value = "registration", layout = MainView.class)
@CssImport("./styles/views/login/registration.css")
public class Registration extends Div implements AfterNavigationObserver {

private static final long serialVersionUID = -1223086666624645746L;

public Registration() {
    UI.getCurrent().getPage().executeJs("document.getElementById('submitbutton')"
            + ".addEventListener('click', () => document.getElementById('ironform').submit());");

    Element ironForm = createRegistrationFormComponent();
    getElement().appendChild(ironForm);

    setClassName("registration-view");
}

private Element createRegistrationFormComponent() {
    VerticalLayout loginLayout = new VerticalLayout();
    loginLayout.setClassName("registration-form-layout");
    loginLayout.add(createUsernameLabel(), createUsernameField(), createEmailLabel(), createEmailField(),
            createPasswordLabel(), createPasswordField(), createPasswordLabel2(), createPasswordField2(),
            createRegisterButton());
    
    FormLayout formLayout = new FormLayout();
    formLayout.add(loginLayout);

    Element formElement = new Element("form");

    formElement.setAttribute("method", "post");
    formElement.setAttribute("action", "login");
    formElement.appendChild(formLayout.getElement());

    Element ironForm = new Element("iron-form");

    ironForm.setAttribute("id", "ironform");
    ironForm.setAttribute("allow-redirect", true);

    ironForm.appendChild(formElement);
    return ironForm;
}

我的注册表单的css文件如下：

.registration-view {
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow-y: auto;
background-color: var(--lumo-shade-5pct);}

.registration-form-layout {
vertical-align: right;
align-items: right;
justify-content: right;}

.submitButton {
width: 100%;
background-color: var(--lumo-success-color);
color: white;
margin-bottom: 55px }

还有我用于导航栏的 css 文件

.navbar {
width: 100%; //
fallback width: 100vw;
padding-right: 2%;
padding-left: 1%;
}