`
biluo62
  • 浏览: 2142 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

【转载】CSS Sticky Footer: 完美的CSS绝对底部

    博客分类:
  • css
阅读更多

下面是我找到的一个比较完美的方法,来自国外的设计达人,纯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绝对底部1

    CSS Sticky Footer布局方案就是为了解决一种常见问题:当页面内容不足以填满整个视口时,底部会留在屏幕的上方,留下大片空白,这在视觉上并不理想。本文将详细探讨CSS Sticky Footer的原理和实现方法。 首先,CSS ...

    CSS Sticky Footer布局,使DOM始终位于页面最下方,不会与上方内容重叠.zip

    在网页设计中,保持页面底部(Footer)始终固定在页面底部,即使页面内容较少时也不与主要内容区域重叠,这种布局方式被称为“CSS Sticky Footer”布局。这种布局模式能够提供良好的用户体验,使得用户在浏览页面时...

    css sticky footer经典布局的实现

    CSS Sticky Footer布局是一种常见的网页设计模式,它的目的是让页脚始终保持在页面的最底部,无论内容区域的内容多少。这种布局方式特别适用于响应式设计,尤其是手机网页,它能确保页面内容较少时,页脚紧贴屏幕...

    CSS实现Sticky Footer的示例代码

    所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果:如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的...

    页面布局,实现footer永远在底部

    首先,将body和container元素设置为相对定位,然后将footer设置为绝对定位,并将其底部与容器底部对齐。这种方法适用于内容较少的情况。 ```css body, .container { position: relative; min-height: 100%; } ....

    详解Sticky Footer 绝对底部的两种套路

    Sticky Footer,也被称为绝对底部布局,是一种网页设计中常见的页面布局方式,旨在确保无论页面内容多少,页脚始终位于屏幕底部或者与内容区域底部对齐。这种布局方法在用户体验中很重要,因为它提供了清晰的界面...

    详解CSS经典布局之Sticky footer布局

    在Web开发中,Sticky footer布局是一种常见的页面布局方式,它可以使页脚(footer)在页面中始终固定在屏幕的底部位置,而不受内容区域内容多少的影响。这种布局方式特别适合那些需要保持页脚始终可见的网站设计。在...

    CSS Sticky Footer 几种实现方式

    所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底...

    CSS 固定网页底部

    2. **粘性定位法**:CSS3引入了`position: sticky`,可以在内容滚动到一定位置时使元素保持固定。 ```css footer { position: -webkit-sticky; /* 对旧版Safari的支持 */ position: sticky; bottom: 0; /* ...

    HTML5-Sticky-Footer:适用于需要粘贴页脚的小型网页HTML5模板

    1. **CSS定位**:CSS中的定位(positioning)属性是实现粘性页脚的关键。通常,我们可以将页脚的`position`属性设置为`fixed`,使其相对于浏览器窗口而不是其父元素进行定位。这样,即使用户滚动页面,页脚也会固定...

    footer 粘连底部例子

    在IT界,"粘连底部"(Sticky Footer)是一种常见的网页布局技术,它使得页面底部始终固定在视口的底部,即使内容区域不足时也不会上移,而是保持在屏幕的最下方。这种布局方式在现代网页设计中广泛应用,尤其在响应...

    Sticky-Footer:制作粘性页脚的 3 种方法各有利弊

    粘性页脚展示了 3 种制作粘性页脚的方法。 每个 HTML 文件都与其他文件相同,但 CSS 类...方法弹性盒 (CSS) 绝对定位 (CSS) jQuery (JS)弹性盒 (CSS)优点非常简单和干净的 CSS 允许可变高度的页脚没有无样式内容的闪光

    CSS实现footer“吸底”效果

    在网页设计中,"CSS实现footer“吸底”效果"是一个常见的需求,目的是让底部元素如页脚始终保持在页面的最底部,无论内容区域有多高。这种效果在各种类型的网站和应用中都很常见,比如页面底部的版权信息、导航菜单...

    div footer标签css实现位于页面底部固定

    第二种方法通常被称为“粘性底部”( Sticky Footer)布局,它利用了负的`margin-top`和相对定位。在这种方法中,页脚被赋予一个绝对或固定的位置,然后通过计算页面内容的高度并加上负的顶部外边距,使其在视觉上...

    居底部显示

    4. ** Sticky Footer**:一种常见的解决方案是Sticky Footer,它利用负的margin值和绝对定位来确保页脚始终在视口底部。当内容不够填充整个屏幕时,页脚位于页面底部;当内容超出屏幕时,页脚会随着滚动条向下移动,...

    skeleton_sticky_footer:Skeleton 2.0.4基本示例的最小增强版本,带有粘性页脚

    您可能还发现Skeleton非常轻巧,即使页面内容很短,对页脚的跨浏览器支持也不会保留在页面底部。 该存储库包含Skeleton 2.0.4附带的样板“基本页面”的最低增强版本。 该页面添加了必要的包装div来创建粘性页脚,...

    详解八种方法实现CSS页面底部固定

    在网页设计中,保持页面底部(footer)始终固定在屏幕底部是一种常见的需求,特别是在内容较少时,确保底部导航栏始终可见。本文将详细介绍八种实现CSS页面底部固定的方法,帮助开发者更好地理解和应用这些技术。 1...

Global site tag (gtag.js) - Google Analytics