如何消除頁腳和頁面內容之間的差距

所以，我的 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>;

uj5u.com熱心網友回復：

我認為這是因為你沒有給你的內容 div 一個最小高度。如果你想讓它占據你可以設定的其余空間

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

標籤：html css 反应 顺风-css

上一篇：如何將導航項與頁面中心對齊

下一篇：使用TailwindCSS減少<a>的可點擊區域