Question

我试图创建一个可变高度的粘性页脚并且已经接近但我已经陷入了最后的障碍。

我已经使用了此处显示的方法：http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/它似乎在IE中正常工作但在Chrome中我最终会得到以下结果。

enter image description here

它应该看起来像这样（IE）：

enter image description here

请注意，在Chrome中，元素似乎以某种奇怪的方式垂直居中，但在IE中，标题位于顶部，页脚位于底部，中间的内容元素填充其余空间。

以前有没有人遇到这个问题？

这基本上是我的代码：

HTML

<!DOCTYPE html>
<html>
    <body id="frm">

        <!-- Header -->
        <div id="divHeader" class="row">
            <div>
                <h1>Header</h1>
            </div>
            <div>
                <h2>Menu</h2>
            </div>
        </div>

        <div id="divAll" class="row expand">
            <p>test>
        </div>

        <!-- Footer -->
        <div id="divFooter" class="row">
            <h1>Footer</h1>
        </div>

    </body>
</html>

CSS

html {height:100%;margin:0;padding:0;}
body {display:table;width:100%;height:100%;margin:0;padding:0;}
.row {display:table-row;height:1px;}
.row.expand {height:auto;}

我知道有一种方法可以使用display：flex但我需要支持IE9 +所以这不是一个选项。

我也知道您可以使用固定高度的页脚，然后使用媒体查询更改高度，但这也不是一个选项，因为页脚的内容可能会有所不同，因此高度可能会有所不同。

非常感谢任何帮助。

谢谢，安迪

可变高度的粘性页脚

0 个答案: