保持页脚可变高度的底部

问题描述：

我需要保持在底部的页脚，但它的高度是可变的，所以主要的解决方案是不适合我......的保持页脚可变高度的底部

例子我不能做： http://www.cssstickyfooter.com/ http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

任何人都有一个灵活的页脚解决方案？谢谢

答

2014 UPDATE：解决这个问题的布局现代的方式是use the flexbox CSS model。它受到所有主流浏览器和IE11 +的支持。

下面是使用div灵活的高度粘性页脚display: table-row的解决方案：

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: yellow; 
 
} 
 
.content { 
 
    display: table-row; 
 
    /* height is dynamic, and will expand... */ 
 
    height: 100%; 
 
    /* ...as content is added (won't scroll) */ 
 
    background: turquoise; 
 
} 
 
.footer { 
 
    display: table-row; 
 
    background: lightgray; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <h2>Content</h2> 
 
    </div> 
 
    <div class="footer"> 
 
    <h3>Sticky footer</h3> 
 
    <p>Footer of variable height</p> 
 
    </div> 
 
</div>

有什么需要注意的是，CSS的设计布局文件，而不是Web应用程序屏幕。 CSS display：table属性非常有效，并且在all major browsers中受支持。这与使用结构表进行布局不一样。

+1，这真的很酷。你知道这种方法有什么缺点吗？你认为它会在移动设备上占据怎样的位置？ – 2013-03-19 02:59:14

这真是太棒了 - 谢谢！但它并不完全符合我的需求，这是因为可变高度的粘性页脚和可滚动的内容区域。我发现我可以通过省略内容上的“display：table-row”并设置“overflow-y：scroll”来实现。在页脚上，我将其更改为“display：table-footer-group”。这导致事情完全按照需要工作！ – nkoren 2014-05-25 10:41:26

您应该将'table-layout：fixed;'添加到类包装器中。没有这个，我在IE中遇到了一些宽度问题。无论最大宽度如何，内容都会溢出。 – 2015-07-01 14:56:01

答

我想我明白你是什么。

您需要删除高度的CSS并用填充，顶部和底部填充，只要您还在哪些间距..

例如更换

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: #6CF; 
    padding-top: 20px; 
    padding-bottom: 20px; 
}

会检查出来，谢谢 – diegoiglesias 2012-02-04 17:44:34

如果这项工作可以标记我的文章作为anwsers。谢谢 – 2012-02-07 10:43:06

答

#wrapper, #content, #footer { 
    width:100%; 
    height:100%; 
    position: relative; 
} 


<div id="wrapper"> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

...不会创建可变高度页脚，但将其缩放到视口区域的100％。 – HumanInDisguise 2016-03-15 15:37:24

保持页脚可变高度的底部

相关推荐