下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div>
说明: 使用这个布局的前提,就是footer要在总的div容器之外,footer使用一个层,其它所有内容使用一个总的层。如果确实需要到添加其它同级层,那这个同级层就必须使用position:absolute进行绝对定位。
CSS代码:
下面是主要的CSS代码,让你的底部可以位于窗口的最下面:
html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */ #footer {position: relative; margin-top: -150px; /* footer高度的负值 */ height: 150px; clear:both;}
说明: 需要注意的就是#main的padding值、footer的高度和负margin值,需要保持一致。
就是这么简单,不过还没完。如果你的主体是使用悬浮布局,还得解决一些浏览器的兼容问题,这里使用的重点是为了Goolge Chrome。
对#main部份进行著名的Clearfix Hack:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
相关推荐
CSS Sticky Footer布局方案就是为了解决一种常见问题:当页面内容不足以填满整个视口时,底部会留在屏幕的上方,留下大片空白,这在视觉上并不理想。本文将详细探讨CSS Sticky Footer的原理和实现方法。 首先,CSS ...
在网页设计中,保持页面底部(Footer)始终固定在页面底部,即使页面内容较少时也不与主要内容区域重叠,这种布局方式被称为“CSS Sticky Footer”布局。这种布局模式能够提供良好的用户体验,使得用户在浏览页面时...
CSS Sticky Footer布局是一种常见的网页设计模式,它的目的是让页脚始终保持在页面的最底部,无论内容区域的内容多少。这种布局方式特别适用于响应式设计,尤其是手机网页,它能确保页面内容较少时,页脚紧贴屏幕...
所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果:如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的...
首先,将body和container元素设置为相对定位,然后将footer设置为绝对定位,并将其底部与容器底部对齐。这种方法适用于内容较少的情况。 ```css body, .container { position: relative; min-height: 100%; } ....
Sticky Footer,也被称为绝对底部布局,是一种网页设计中常见的页面布局方式,旨在确保无论页面内容多少,页脚始终位于屏幕底部或者与内容区域底部对齐。这种布局方法在用户体验中很重要,因为它提供了清晰的界面...
在Web开发中,Sticky footer布局是一种常见的页面布局方式,它可以使页脚(footer)在页面中始终固定在屏幕的底部位置,而不受内容区域内容多少的影响。这种布局方式特别适合那些需要保持页脚始终可见的网站设计。在...
所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底...
2. **粘性定位法**:CSS3引入了`position: sticky`,可以在内容滚动到一定位置时使元素保持固定。 ```css footer { position: -webkit-sticky; /* 对旧版Safari的支持 */ position: sticky; bottom: 0; /* ...
1. **CSS定位**:CSS中的定位(positioning)属性是实现粘性页脚的关键。通常,我们可以将页脚的`position`属性设置为`fixed`,使其相对于浏览器窗口而不是其父元素进行定位。这样,即使用户滚动页面,页脚也会固定...
在IT界,"粘连底部"(Sticky Footer)是一种常见的网页布局技术,它使得页面底部始终固定在视口的底部,即使内容区域不足时也不会上移,而是保持在屏幕的最下方。这种布局方式在现代网页设计中广泛应用,尤其在响应...
粘性页脚展示了 3 种制作粘性页脚的方法。 每个 HTML 文件都与其他文件相同,但 CSS 类...方法弹性盒 (CSS) 绝对定位 (CSS) jQuery (JS)弹性盒 (CSS)优点非常简单和干净的 CSS 允许可变高度的页脚没有无样式内容的闪光
在网页设计中,"CSS实现footer“吸底”效果"是一个常见的需求,目的是让底部元素如页脚始终保持在页面的最底部,无论内容区域有多高。这种效果在各种类型的网站和应用中都很常见,比如页面底部的版权信息、导航菜单...
第二种方法通常被称为“粘性底部”( Sticky Footer)布局,它利用了负的`margin-top`和相对定位。在这种方法中,页脚被赋予一个绝对或固定的位置,然后通过计算页面内容的高度并加上负的顶部外边距,使其在视觉上...
4. ** Sticky Footer**:一种常见的解决方案是Sticky Footer,它利用负的margin值和绝对定位来确保页脚始终在视口底部。当内容不够填充整个屏幕时,页脚位于页面底部;当内容超出屏幕时,页脚会随着滚动条向下移动,...
您可能还发现Skeleton非常轻巧,即使页面内容很短,对页脚的跨浏览器支持也不会保留在页面底部。 该存储库包含Skeleton 2.0.4附带的样板“基本页面”的最低增强版本。 该页面添加了必要的包装div来创建粘性页脚,...
在网页设计中,保持页面底部(footer)始终固定在屏幕底部是一种常见的需求,特别是在内容较少时,确保底部导航栏始终可见。本文将详细介绍八种实现CSS页面底部固定的方法,帮助开发者更好地理解和应用这些技术。 1...