如何消除页脚和页面内容之间的差距

Question

所以，我的 React 应用程序中有这个页面。我正在使用 Typescript，我的 CSS 框架是 Tailwind

这是我为这个页面编写的代码

export default function Incidents() {
const {t} = useTranslation();
const dispatch = useDispatch();
const {back, next} = useSteps(QuestionType.AdditionalInformation);
const [text, updateText] = useState<string>("");
const {
    active,
    disabled,
    question,
    answered,
} = useSelector(
    (state: State) => ({
        answered: Boolean(state.filoHome.details.additionalInformation.value),
        active: state.filoHome.active === QuestionType.AdditionalInformation,
        disabled: !text,
        question: state.filoHome.details.additionalInformation
    })
);

useEffect(() => {
    updateText(question.value ? question.value : "");
}, []);

const getCharacterCount = useCallback(
    (text) => {
        return text.length + '/1200';
    }, 
    [text]
);

const onNextButton = () => {
    if(text)
        dispatch(setAdditionalInformation(text));
    next(text);
};

const BackgroundStyles = css`
    ${(props) => props.theme.brand === "belair" && tw`bg-white`};
    ${(props) => props.theme.brand === "bna" && tw`bg-secondary3`};
`

return(
    <div className="additional-information" css={BackgroundStyles}>
        <div tw="flex flex-col float-left w-full mt-6 pb-11">
            <h2 tw="block text-center font-semibold text-2xl mt-8 mx-4" data-testid="Incident-Title">{t("FILO_HOME_INCIDENT_TITLE")}</h2>
            <div tw="w-4/5 lg:w-1/2 self-center">
                <textarea
                    tw="block self-center border border-gray-400 rounded bg-white mt-6 p-2 w-full"
                    maxLength={1200}
                    onChange={event => updateText(event.target.value)}
                    value={text}
                    placeholder={t("FILO_HOME_INCIDENT_INPUT_FIELD")}
                    data-testid={"additional-info-textbox"}
                >
                </textarea>
                <span tw="flex justify-end opacity-70 mb-4" data-testid={"wordcount-textbox"}>{getCharacterCount(text)}</span>
            </div>
        </div>
        <Footer
            tw="float-left w-full inline-block"
            type={QuestionType.AdditionalInformation}
            disabled={disabled}
            actionOnBack={() => back()}
            actionOnNext={onNextButton}
        ></Footer>
    </div>
);

}

我的问题是为什么我的页脚和页面内容之间有空隙。我无法让我的第一个 div 延伸到页脚，我该如何让它工作？灰色部分笨拙地在中间结束。我的内容和页脚之间的白色间隙在检查时甚至无法到达，就像它不是页面的一部分一样。这是我的页脚代码：

return <footer tw="fixed right-0 bottom-0 left-0 w-full bg-white">
    <hr tw="mt-4 lg:mx-10 mx-4 "/>
    <div tw="pt-4 mb-3 flex items-center justify-center text-center">
        <Visible when={type != QuestionType.ImpactedAssets}>
            <Button kind="link" tw="font-bold mr-8 text-base! left-0" data-testid="filo-home-back-btn" onClick={actionOnBack}>
                <img
                    height="24px"
                    width="24px"
                    onClick={actionOnBack}
                    src={"static/media/icons/arrow-left.svg"}
                />{t("FILO_HOME_FOOTER_BACK")}</Button>
        </Visible>
        <Button kind="primary" tw="text-base!" data-testid="filo-home-next-btn" disabled={disabled}
                onClick={actionOnNext}>{t("FILO_HOME_FOOTER_NEXT")}</Button>
    </div>
</footer>;

Answer 1

我认为这是因为您没有为内容设置 div 最小高度。如果你想让它占用剩余的 space 你可以设置

min-height: calc(100% - <height of footer>);

如何消除页脚和页面内容之间的差距

How to remove gap between footer and page content

html

css

reactjs

tailwind-css