iOS 设备中表格页脚未固定在每个页面的底部

Question

iOS 设备中的表页脚未固定在每个页面的底部。它在 Android 和 Windows 设备上运行良好 代码是：

  const downloadPdfRef = useRef();
  let date = new Date();
  const handlePrint = useReactToPrint({
    content: () => downloadPdfRef.current,
    documentTitle: `JustATutor-${date.getDate()}-${date.getMonth()}-${date.getFullYear()}`,
    removeAfterPrint: false,
  }); 
 
  const manipulateDOM = () => {
    let ql_container_node = document.querySelectorAll(".ql-container");
    let ql_editor = document.querySelectorAll(".ql-editor");
    ql_container_node?.forEach((element) => element.classList.add("hide-border"));
    ql_editor?.forEach((element) => element.classList.add("reduce_editor_padding"));
  };
  const quillRef = useCallback((node) => {
    if (node !== null) {
      manipulateDOM();
    }
  }, []);
  useEffect(() => {
    manipulateDOM();
  }, [format]);

  return (
    <>
      <Container
        maxWidth={false}
        sx={{
          paddingRight: { xs: "16px" },
          paddingLeft: { xs: `${globalVariable}px`, md: `${globalVariablemd}px` },
          paddingTop: "10px",
          paddingBottom: "16px",
        }}
      >
        <>
          <div className="flex flex-col w-full min-h-full print_questions_container " >
            <div className="view-question-container p-8 pb-8 bg-[#ffffff] relative w-full" ref={downloadPdfRef} style={{minHeight: '100vh'}}>
              <div>
                <div className="flex justify-between w-full">
                  <div className="self-end">
                    <Typography variant="h6" className="print-heading-primary uppercase font-bold w-fit leading-none font-arial my-1">
                      JustATutor
                    </Typography>
                    <Typography className="print-heading-secondary font-bold leading-none font-arial">{headerText}</Typography>
                  </div>
                  <img src={HeaderImage} alt="Character Image" className="h-auto w-[60px] -mb-1" />
                </div>
                <Divider
                  className="h-1"
                  sx={{
                    marginBottom: "12px",
                  }}
                />
                <Typography className="print-heading-secondary text-2xl leading-none font-romans" sx={{ lineHeight: "1" }}>
                  <pre style={{ fontFamily: "inherit" }}>{topicText}</pre>
                </Typography>
                <Divider
                  className="h-1"
                  sx={{
                    marginTop: "12px",
                    marginBottom: "12px",
                  }}
                />
              </div>

              <Table>
                <TableBody className="page-breaker">
                  <TableRow style={{ borderBottom: "none" }}>
                    <TableCell sx={{ borderBottom: "none" }}>
                      <div className="mt-1 mb-1">
                        <div>
                          <Typography
                            variant="h6"
                            className="font-bold font-romans leading-[0.6] w-fit border-black text-black "
                            sx={{ fontSize: "16px", borderBottomWidth: "1px", lineHeight: "0.8", marginBottom: "0.5rem" }}
                          >{`Question 1`}</Typography>
                        </div>
                        <div>
                          <Typography
                            variant="h6"
                            className="font-bold font-romans leading-[0.6] mt-3 w-fit border-black text-black"
                            sx={{ fontSize: "16px", borderBottomWidth: "1px", lineHeight: "0.8", marginBottom: "0.5rem" }}
                          >
                            Answer
                          </Typography>
                        </div>
                      </div>
                    </TableCell>
                  </TableRow>
                </TableBody>
                <TableFooter>
                  <TableRow>
                    <TableCell>
                      <div className="flex justify-between footer-image mt-4" ref={quillRef}>
                        <Typography className="font-bold leading-none font-arial" sx={{ fontSize: "12px" }}>
                          {headerText}
                        </Typography>
                        <img className="footer-logo " src={FooterLogopng} alt="logo" />
                      </div>
                    </TableCell>
                  </TableRow>
                </TableFooter>
              </Table>
            </div>
            <Divider className="h-2 my-10" />
          </div>

          <div className="text-end ">
            <Button
              text={"Download as PDF"}
              primary
              className="px-8 my-4 py-2"
              onClick={() => {
                handlePrint();
              }}
            />
          </div>
        </>
      </Container>
    </>
  );
};

export default PrintPdfPage;

它的 CSS 是：

@media print {
  /* html and body tweaks */
  html, body {
    height: auto !important;
    overflow: initial !important;
    background: none;
    font-size: 7.5pt; /* changing to 10pt has no impact */
  }
.topNavBar, .HideOnPrint{
  display: none;
}
  /* Page breaks */
  .page-break-after {
    display: block;
    page-break-after: always;
    position: relative;
  }

  tbody tr td {
    margin-top: -8px;
    padding-top: 80px;
    page-break-inside: avoid;
  }

  .print_questions_container .ql-container, td {
    border-bottom: none !important;
    padding: 0px 0px !important;
  }

  .section-answers table {
    page-break-before: always !important;
    page-break-inside: avoid;
  }
 
  .page-breaker {
    page-break-after: auto;
    /* page-break-after: always; */
  }

  .page-breaker tr {
    padding-top: 2px;
  }

  /*---Below styles are to avoid page break in questions in Question and then Answers mode.*/
  .page-breaker tr {
    display: block !important;
    page-break-inside: avoid !important;
  }
  .page-breaker tr td {
    display: block !important;
    page-break-inside: avoid !important;
  }
  /* ------- */

  body .footer-image {
    position: absolute;
    bottom: 5px;
    left: 0;
    padding: 0 1rem;
    width: 100% !important;
  }
  
  body .footer-placeholder {
    display: block;
  }

  .page-break-before {
    display: block;
    page-break-before: always;
    position: relative;
  }

  @page {
    size: A4; /* DIN A4 standard, Europe */
    margin: 20px 35px 0.8rem 35px;
    overflow: hidden;
  } 
}

Windows 设备中的输出是： ios 设备中的输出是

我希望打印时页脚粘在每页的底部

Answer 1

只需在页脚 css 中添加这两行：

位置：粘性

顶部：100%