在移动视图中，我的页脚没有停留在页面底部，而是出现在页面下方

Question

在移动视图中，我的页脚没有停留在页面底部，而是出现在页面下方。我试过使用 'position: fixed' 'bottom: 0' 和 'position: absolute' 'bottom: 0' 和 'position: sticky' 但似乎都不起作用。是什么导致了这个问题，我该如何解决？ 我也试过 min-height: 100vh 在身体上。 这是它目前的样子：

我可以在页脚容器上使用 bottom: 10px，但寻找不那么骇人听闻的东西。

页脚代码：

import styled from '@emotion/styled'

const Container = styled('div')(
  { position: 'relative' },
  ({ isPhone }) => ({
    padding: isPhone ? '4px 8px 16px 8px' : '8px 32px 24px 32px'
  })
)

const BottomFade = styled('div')({
  width: '100%',
  position: 'absolute',
  height: '24px',
  top: '-24px',
  left: '0',
  background: 'linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1))',
  zIndex: '20'
})

const SaveDraftButtonContainer = styled.div({
  display: 'flex',
  justifyContent: 'center',
  marginTop: '24px',
  alignItems: 'center',
  width: '108px'
})

const PlaceOrderContainer = styled('div')(
  {
    alignItems: 'center',
    flexDirection: 'column',
    maxWidth: '100%'
  },
  ({ isPhone, enableDraftTrade }) => ({
    display: isPhone ? 'block' : 'flex',
    padding: isPhone ? '0' : (enableDraftTrade ? '0 0px 0 20px' : '0 16px')
  })
)

const SubmitOrderActionContainer = styled('div')(
  {
    display: 'flex',
    width: '100%',
    justifyContent: 'space-between'
  },
  ({ isPhone }) => ({
    flexDirection: isPhone && 'column'
  })
)

const PasswordInputContainer = styled('div')(
  ({ isPhone, enableDraftTrade }) => ({
    marginRight: !isPhone && (enableDraftTrade ? '16px' : '24px'),
    paddingBottom: isPhone && '16px'
  })
)

const SubmitOrderButtonContainer = styled('div')(
  ({ isPhone, enableDraftTrade }) => ({
    width: isPhone ? '100%' : (enableDraftTrade ? '157px' : '211px')
  })
)

const SummaryFooterView = ({
  showFooter,
  isPhone,
  enableDraftTrade
}) => {
  return showFooter ? (
    <Container isPhone={isPhone} data-testid={'footer-container'}>
      <BottomFade />
      <SaveDraftButtonContainer>
        <SaveDraftButton />
      </SaveDraftButtonContainer>
      <PlaceOrderContainer isPhone={isPhone} enableDraftTrade={enableDraftTrade}>
        <PasswordInputContainer isPhone={isPhone} enableDraftTrade={enableDraftTrade}>
          <PasswordInput />
        </PasswordInputContainer>
        <SubmitOrderActionContainer isPhone={isPhone}>
          <SubmitOrderButtonContainer isPhone={isPhone} enableDraftTrade={enableDraftTrade}>
            <Button isDisabled={!allowSubmit} isPrimary onClick={onClickSubmit}>
              {isSubmitting ? 'Submitting...' : 'Submit'}
            </Button>
          </SubmitOrderButtonContainer>
          {autoReweightScheduleEnabled && (
            <PasswordInputContainer isPhone={isPhone} enableDraftTrade={enableDraftTrade}>
              <Countdown />
            </PasswordInputContainer>
          )}
        </SubmitOrderActionContainer>
      </PlaceOrderContainer>
    </Container>
  ) : null
}

页面也需要可滚动我尝试过的一些修复似乎停止了滚动。

它应该是这样的：

问题只发生在 iphone 上而不是 android

Answer 1

包含页脚代码的容器的高度是多少（在大多数情况下是主体本身）？如果它设置为 100vh 之类的值，那么这可能是罪魁祸首，因为 ios 会报告视口高度的实际屏幕大小，而不排除地址栏等 UI 元素。也许使用动态视口高度 (100dvh) 设置父容器的高度可能会完成这项工作，因为在计算视口单位时会考虑浏览器中的 UI 元素。

PS：这可能不是最好的方法，因为当有人滚动并且视口高度发生变化时，它可能会导致您的 UI 出现“跳跃”。我最近看了这个视频，它很好地概述了视口单位和潜在的陷阱https://www.youtube.com/watch?v=veEqYQlfNx8s