CSS实现footer“吸底”效果
我们经常会遇到这样的问题:如何用css来实现底部元素可“粘住底部”的效果,对于“粘住底部”,本文有两种理解: 一是无论内容的多少,我们都希望使按钮,固定于可视窗口的底部,且内容区是可滚动的。 二是当内容区的内容较少时,页脚区不是随着内容区排布,而是始终显示在屏幕的最下方;当内容区的内容较多时,页脚能随着内容区的增高而撑开,始终显示在页面的最底部。 谈到“吸底”效果的实现,大家可能较多了解到的是sticky-footer布局,但这个方式大多是用来解决第二种情况的实现。本文将采用以下的三种方案来分别来实现以上这两种效果,并简单实现的原理以及其的适用情况。 容器(wrapper)包含两部分,分别是内容(content)和底部需固定的区域(footer)。 html设置 <!-- wrapper是包裹content和footer的父容器 --></div> <div class= "wrapper" > <div class= "content" > <ul> <!-- 页面主体内容区域 --></div> <li>1.这是内容,这是内容……</li> <li>2.这是内容,这是内容……</li> <li>3.这是内容,这是内容……</li> <li>4.这是内容,这是内容……</li> <li>5.这是内容,这是内容……</li> <li>6.这是内容,这是内容……</li> <li>7