咨询：Ionic元素页面缩小时丢失原始位置的解决方法

问题根源在于IonRow设置了height: 100%：当内容总高度超过视口高度时，flex布局的justify-content: center会强制内容在100%视口高度范围内居中，导致上下部分内容被截断且无法正常滚动。

只需修改IonRow的样式，将height: 100%替换为min-height: 100vh，即可同时满足两种场景需求：

• 内容高度小于视口时，容器占满整个视口高度，保持内容垂直居中
• 内容高度超过视口时，容器高度随内容自适应扩展，允许通过滚动查看全部内容

修改后的完整代码：

import React from 'react';
import { IonPage, IonContent, IonRow } from '@ionic/react';

const Button = ({ children }) => (
  <div
    style={{
      display: 'inline-block',
      backgroundColor: '#fff',
      padding: '12px 22px',
      margin: '10px 10px',
    }}
  >
    <span>{children}</span>
  </div>
);

const OptionsButtons = () => (
  <div style={{ textAlign: 'center' }}>
    <div>
      <Button>This is your Option Number 1</Button>
    </div>
    <div>
      <Button>This is your Option Number 2</Button>
    </div>
  </div>
);

const Delimiter = () => (
  <div>
    <span style={{ color: '#ff0' }}>==============================</span>
  </div>
);

const App = () => (
  <IonPage>
    <IonContent
      fullscreen
      className=""
      style={{
        '--ion-background-color': 'none',
        backgroundImage: `url('https://wallpaperaccess.com/full/1902544.jpg')`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      }}
    >
      <IonRow
        style={{
          minHeight: '100vh', // 关键修改：用min-height替代height
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
      </IonRow>
    </IonContent>
  </IonPage>
);

export default App;

效果说明 #

• 视口空间充足时：内容依然保持垂直居中，与原需求一致
• 视口缩小后：容器高度随内容自动调整，所有元素不会错位或被截断，用户可通过滚动查看全部内容

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