底部有可变内容的页脚

我需要对零件解决方案进行一些逻辑审查，我不满足。我在我的页面上有一个表格（用DataTables创建），所以有动态内容，这意味着表格的高度和宽度可能会有所不同。表格嵌入三个div封装（是的，它们是必要的），我必须控制最外层的高度，以便页脚停留在页面的底部。底部有可变内容的页脚

的jsfiddle：http://jsfiddle.net/5hh9H/158/

这工作得很好，除了当表和页脚高度的内容高度小于窗口的高度。

代码我指的是：

if ($(window).height() < $("#wrapper").height()) { 
    $("#table-container").height($("#wrapper").height()); 
} else { 
    if ($(window).height() > $("#wrapper").height() + $("#footer").height() + 45) { 
     $("#table-container").height($(window).height() - $("#footer").height() - 45); 
    } else { 
     //Don't know, if this is necessary vv 
     $("#table-container").height($("#wrapper").height()); 
    } 
}

在这种情况下，使你不能看到它时，滚动到顶部页脚太低。但是，当前功能的任何改变都不会让我从页脚移动到页面底部到页脚停止在桌面下方的平滑过渡（单击“收缩内容！”，滚动到底部并减小/增加窗口大小）。当内容最小化并且页面滚动到顶部时，我希望页脚在底部可见！

前

后

来源

2015-08-20 Innerw0lf

我给你的建议的一个强烈的字眼：**如果不是绝对的必要时，不要使用Javascript **操作CSS。相反，根据需要向元素添加类 - 它将CSS保留在它所属的位置，并且可能更具性能......但不要拘泥于此。 –

但是，这是必要的，页脚内容如何缩小以使其停留在底部时，页脚将如何知道？ – Innerw0lf

参见this question的答案。有几种方法可以做到这一点。被接受的答案具有页脚必须具有固定高度的限制。我提出的答案并不是（并不是说我的答案更好，我相信它有它自己的缺点）。

对于不依赖于固定高度的仅限CSS的解决方案，请使用display: table。

CSS

html, body { 
    height: 100%; 
} 
body { 
    display: table; 
    width: 100%; 
} 
.content { 
    display: table-row; 
    height: 100%; 
} 
.smallFooter { 
    display: table-row; 
    height: 1px; 
}

HTML

<div class="content"> 
    <p>Main content goes here.</p> 
</div> 
<footer class="smallFooter"> 
    <p>Footer content goes here</p> 
</footer>

看到它在行动与this fiddle

来源

2015-08-20 19:10:09 Stef

底部有可变内容的页脚

回答

相关问题