html - 内部 div 的高度大于容器

标签 html reactjs css flexbox

<分区>

我的主要区域中间有页脚问题。

默认情况下是这样的:

<div style={{width: '100%', height: '100%', display: 'flex', flexFlow: 'column nowrap'}}>
    <div id="appbar"></div>
    <div id="main" style={{ margin: '4.5rem 0 0 0', width: '100%', height: '100%', boxSizing: 'border-box' }}>
        <Router>
            <Home />
        </Router>
    </div>
    <div id="footer"></div>
</div>

主 div 设置为预期的 100% 会发生什么,但随后它会出现一些深度嵌套的子项(Home 组件),其高度超过原始高度的 100%。在那之后我的页脚恰好卡在了 main 的中间:enter image description here

我怎样才能克服这个问题?

最佳答案

尝试给出一个底部为 0 的绝对位置,并为您的内容提供填充底部

关于html - 内部 div 的高度大于容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56223428/

上一篇:javascript - 如何仅在第二张幻灯片上更改轮播图像 slider 指示器(箭头)颜色?

下一篇:html - 媒体查询后不触发CSS动画

相关文章:

html - 使用 translateY 的垂直居中在 Chrome 中不起作用

javascript - 使用 jQuery 动态更改内容

html - 用 CSS 替换 <img> 中的图像

javascript - 正则表达式获取 HTML 标签之间的单词

html - 虚线框

reactjs - 在 ES6 中使用历史混合?

javascript - 如何使用react将多个参数作为url中的对象传递

reactjs - 将 i18next 实例传递给 I18nextProvider 时出现类型错误

CSS3 unicode-range 在 Firefox 中不起作用

html - HTML 电子邮件 Outlook 2007 中的重复内容