文章/答案/技术大牛

发布

社区首页 >问答首页 >带有粘性/固定页眉和底部粘性页脚的Flexbox (跨平台兼容)

问带有粘性/固定页眉和底部粘性页脚的Flexbox (跨平台兼容)
EN

Stack Overflow用户

提问于 2015-12-02 02:49:51

回答 1查看 180关注 0票数 2

我想要一个固定的标题，它总是在页面的顶部。我也希望页脚是粘性的，如果没有足够的内容来填充页面，但它应该在内容之后，如果有。从本质上讲，它的行为应该类似于这个https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/，但是有一个粘性的头部。

我已经花了几个小时来处理这个问题，现在我可以弄清楚了。这是我到目前为止所得到的：

html {
        background: black;
        height: 100%;
    }
    
    body {
        margin: 0;
        height: 100%;
        background: yellow;
        display: flex;
        flex-direction: column;
    }
    
    header {
        height: 50px;
        background: red;
    }
    
    #main {
        flex: 1;
        justify-content: stretch;
        overflow-y: auto;
        background: green;
        display: flex;
        flex-direction: column;
    }
    
    #content {
        flex: 1;
    }
    
    footer {
        flex: none;
        height: 50px;
        background: blue;
    }
    
    p.toggle2 { /* rename toggle to anything else to get full-height content */
        display: none;
    }

 <body>
        <header>fixed header</header>
        <div id="main">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl. Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices. Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Ph sellus at auctor leo. Sed blandit urna non justo ornare blandit.</p>
                <p class="toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl. Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices. Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Ph sellus at auctor leo. Sed blandit urna non justo ornare blandit.</p>
                <p class="toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl. Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices. Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Ph sellus at auctor leo. Sed blandit urna non justo ornare blandit.</p>
                <p class="toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl. Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices. Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Ph sellus at auctor leo. Sed blandit urna non justo ornare blandit.</p>
                <p class="toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl. Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices. Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Ph sellus at auctor leo. Sed blandit urna non justo ornare blandit.</p>
                <p class="toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget vestibulum augue. Pellentesque suscipit tellus quis dapibus fermentum. Sed risus lectus, mollis quis orci vitae, mattis consequat sapien. Sed vitae cursus nisi. Suspendisse cursus felis nec felis ornare, sit amet ullamcorper diam dictum. Fusce feugiat pellentesque lorem, at eleifend tellus rutrum sit amet. Vestibulum id neque est. Duis interdum nunc nec lobortis rutrum. Sed ut tincidunt turpis, et adipiscing urna. Nam sit amet tellus et elit fringilla tempus ut vitae erat. Integer eu placerat magna, non ornare felis. Aenean eu dapibus leo. Cras dui nisi, volutpat in pretium vitae, ultrices a dui. Nullam consequat feugiat purus non vehicula. Aenean lacinia, mi non euismod malesuada, lorem dolor scelerisque velit, sed consequat ante leo quis nisl. Etiam vel lacus dolor. Quisque at fringilla eros. Vivamus eget turpis sem. Praesent vel hendrerit ante. In hac habitasse platea dictumst. Integer scelerisque diam ut justo feugiat, quis porttitor felis imperdiet. Mauris at ullamcorper sem. In hac habitasse platea dictumst. Vivamus ultrices leo vitae lacinia vulputate. Vestibulum orci ligula, imperdiet non luctus eget, luctus eu nisl. Maecenas mollis eleifend sollicitudin. Praesent dictum tristique ipsum, quis imperdiet quam. Praesent euismod velit sed ipsum posuere vulputate. Praesent placerat ipsum sed neque viverra, sed adipiscing tortor pulvinar. Phasellus blandit sit amet ligula quis ultrices. Integer tempus risus sit amet aliquam lacinia. Phasellus nec nibh vitae odio tristique commodo. Proin mollis iaculis sapien, a vestibulum odio tincidunt facilisis. Vestibulum sed nibh ornare, mattis ligula quis, porttitor magna. Duis interdum mattis mauris, vel molestie massa porta sit amet. Maecenas vel urna et nisl sodales volutpat non sed urna. Nam dui tortor, semper sed dictum non, congue quis leo. Aenean vitae mi bibendum, sollicitudin sem et, laoreet massa. Nulla ornare augue velit, non placerat nulla pretium et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non rutrum neque, ac ultrices sapien. Etiam lacinia libero vitae dolor ullamcorper laoreet. Ph sellus at auctor leo. Sed blandit urna non justo ornare blandit.</p>
            </div>
            <footer>bottom-sticky footer</footer>
        </div>
    </body>

http://plnkr.co/edit/DFYCK8trfrIXD4bW8NPS

问题是，它在我的Windows8机器上的Chrome (46.0.2490.86m)和Firefox (42.0)上运行得很好，但在我的iPad ( Safari和Chrome，尽管它们的表现不同)上就不行了。我几乎可以肯定，它在Max OS X上的Safari中也不能工作。我尝试了几种不同的方法，但它总是在我的机器上工作，但在苹果设备上不起作用。正如你所看到的，我已经放弃了height: 100vh;，它在苹果的软件中似乎有一点缺陷。

flexbox

html

css

回答 1

Stack Overflow用户

发布于 2015-12-02 09:48:36

我想通了。内部#content需要这样设置：

#content {
    flex: 1 0 auto;
}

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34027849

复制

相似问题

问带有粘性/固定页眉和底部粘性页脚的Flexbox (跨平台兼容)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有粘性/固定页眉和底部粘性页脚的Flexbox (跨平台兼容)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有粘性/固定页眉和底部粘性页脚的Flexbox (跨平台兼容)
EN