我在一个网站上工作,有时页面可能不会覆盖整个屏幕的高度(因为内容较少),这会在页脚下面创建空的空白。我试图通过始终将页脚保持在视口以下来解决这个问题。我尝试过很多方法来解决这个问题,但是它们都解决了一个问题,创造了另一个问题。
这是一个关于我到目前为止所拥有的jSFiddle。
只有当我将height:100%设置为body和html时,它才真正起作用,但这使得DOM中的内容溢出,这是我试图避免的。另外,因为站点需要一个装箱的布局,所以我需要用代码中使用的#page-包装div包装页面内容和页脚。
height:100%
请让我知道,如果有办法实现这一点,与给定的标记。
谢谢!
编辑:这里是一个稍微更新的jSFiddle
灵活稳定的一体化云联络中心,助力快速搭建集电话、在线交流、音视频通话为一体的客户联络平台
发布于 2014-06-10 12:40:48
我认为您可以通过绝对定位页脚和使页面包装器相对定位来做到这一点。问题是,您必须根据HTML元素的高度使用JS来调整页面包装器的大小。类似于:
$('#page-wrapper').height($('html').height());
但是,除非您使用
* { box-sizing: border-box; }
https://stackoverflow.com/questions/24144028
相似问题
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例