相对完美的CSS绝对底部

2016-02-19 23:42 7 1 收藏

下面图老师小编跟大家分享相对完美的CSS绝对底部，一起来学习下过程究竟如何进行吧！喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发】

CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。

先说我们为什么会使用到这个CSS底部布局解决方案:

当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。

对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。

下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。

甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)

HTML代码:

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进行绝对定位。

来源:http://www.tulaoshi.com/n/20160219/1630447.html

上一篇：最新版本的CSS选择器浏览器支持情况
下一篇：小编倾心原创的QQ分组设计_说出更动人旳旁白

看过《相对完美的CSS绝对底部》的人还看了以下文章更多>>

CSS教程:DIV底部放置文字

标签： Web开发

css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢？ !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN...

JQuery 获得绝对,相对位置的坐标方法

标签： Web开发

var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="htt...

excel中绝对引用相对引用与快捷键相对引用图文教程

标签： excel

excel中绝对引用，相对引用，与快捷键相对引用图文教程我们在用excel处理数据的过程中，经常要用到拖拽单元格以进行公式复制，引用的数据是已有单元格中的数据，我们可能需要： 1)绝对引用，就是指引用某一单元格的数值，不随着拖拽而变成引用了其他数值 2)也可能需要相对引用，只引用行数据或列数据 3)还有这几种...

CSS实战：利用CSS相对定位进行多行多列布局

标签： Web开发

CSS制作网页的实例，利用CSS相对定位进行多行多列布局。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title无标题文档/title styl...

用CSS让文字居于DIV的底部