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

Posted 2023-02-22

【中文标题】如何消除页脚和页面内容之间的间隙

【英文标题】：How to remove gap between footer and page content

【发布时间】：2022-01-18 00:02:57

【问题描述】：

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

【参考方案1】：

我认为这是因为您没有给内容 div 指定最小高度。如果您希望它占用您可以设置的其余空间

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

【讨论】：

非常感谢！