时间戳

首页 > 解决方案 > 如何修复动态主体和动态页脚的css高度

html - 如何修复动态主体和动态页脚的css高度

问题描述

简单地说，我有 3 个元素， 

    <div>
        <Header/>
    </div>  
    <div>
        <Body/>
    </div>   
    <div>
        <Footer/>
    </div>

标题是静态但未定义的高度。
正文是一个手风琴，当展开时应该溢出到滚动条
页脚也是一个手风琴，应该始终显示，但可以最小化以仅显示其标题而不是标题+内容。

我需要做的是让标题始终完整显示，让accordionFooter 始终尽可能多地显示（无论是标题+内容，还是只是标题），最后让 bodyAccordion 尽可能多地显示然后溢出到滚动条中。

这是我到目前为止所拥有的。

    Container: {
        height: '100%',
        minHeight: '100%',
        display: 'flex',
        flexDirection: 'column'
    },
    SectionContainer: {
        flex: '1',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative'
    },
    bodyAccordion: {
        overflowY: 'auto'
    },
    footerAccordion: {
        position: 'absolute',
        bottom: '0px',
        right: '0px',
        left: '0px'
    }

html要复杂得多，所以这里是一个简化版本

    <div className={Container}>
      <MyHeader/>
      <div className={SectionContainer}>
        <div className={bodyAccordion}>
          <MyAccordion/>
        </div>
        <div className={footerAccordion}>
          <MyFooterAccordion/>
        </div>
      </div>
    </div>

当上面的代码运行时，bodyAccordion 将溢出到 footeraccordion，而不是增加滚动轮的大小。

这是一个显示问题的 jsFiddle https://jsfiddle.net/jackyFrosty/mwz62bh9/2/

标签： htmlcssreactjs

解决方案

您需要在您的容器类中进行分配min-height:100vh。发生这种情况是因为您100%的标签等于您孩子的标签

推荐阅读