스크롤 가능한 콘텐츠의 높이를 동적으로 조정합니다(Ion Page, React)

Question

ionic React 페이지에 매우 큰 텍스트가 있어서 전체 페이지를 채우는 대신 스크롤하기를 원한다고 가정하면 다음 스타일이 많은 도움이 될 것입니다.

으아아아

하지만 다음과 같이 내용과 바닥글이 포함된 페이지가 있다고 가정해 보겠습니다.

으아아아

모바일에서는 다음과 같습니다:

개발자의 키 제한이 없기 때문에 설명 내용은 스크롤이 불가능하니 참고해주세요. 문제는 "최대 높이"를 정의해야 하지만 페이지 크기가 장치마다 다르고 바닥글 높이에 따라 다르기 때문에 그렇게 할 수 없다는 것입니다.

제안사항이 있나요? 이것은 일반적인 질문인 것 같지만 답을 찾을 수 없습니다.

이것을 시도했습니다:

으아아아

이것은 페이지를 다시 로드할 때만 작동합니다. 왜냐하면 첫 번째 로드에서는 h2Heigth 和 itemHeight 모두 0

으로 표시되기 때문입니다.

Answer 1

결국 이 CSS 클래스를 추가하게 되었습니다:

으아악

그럼 내 페이지에서:

으아악

설명: calc(100% - 60px)는 전체 콘텐츠에서 스크롤되는 콘텐츠를 제외한 모든 콘텐츠를 뺀 높이입니다. (물론 바닥글은 포함되지 않습니다)

이것은 내 대상 장치에서 작동합니다. 그러나 이것은 diff 값을 업데이트하는 것을 기억하지 않는 한 페이지에 콘텐츠를 추가하자마자 깨지기 때문에 다소 불만족스러운 해결책입니다