CSS粘性底部

原文:A CSS sticky footer
作者:Ryan Fait

我E文不好,不过代码看的懂
该文实现粘性居底的核心方法,就是负margin
先用一个容器wrapper包住除footer以外的内容
将wrapper的高度设置为100%,再用负的margin空出footer高度
如此实际wrapper的高度应等于100%-footer.height
效果达成

作者在HTML中加了一个和footer一样高度的push容器
没理解什么意思,可能是用来hack的。谁知道的话,我们探讨一下

把代码贴上

HTML:

  1. <html>
  2.    <head>
  3.   <link rel="stylesheet" href="layout.css" ... />
  4.   </head>
  5.    <body>
  6.    <div class="wrapper">
  7.    <p>Your website content here.</p>
  8.    <div class="push"></div>
  9.    </div>
  10.   <div class="footer">
  11.   <p>Copyright (c) 2008</p>
  12.   </div>
  13.   </body>
  14.   </html>

CSS:

  1. * {
  2. margin: 0;
  3. }
  4. html, body {
  5. height: 100%;
  6. }
  7. .wrapper {
  8. min-height: 100%;
  9. height: auto !important;
  10. height: 100%;margin: 0 auto -4em; /* the bottom margin is the negative value of the footer&#39;s height */
  11. }
  12. .footer, .push {
  13. height: 4em; /* .push must be the same height as .footer */
  14. }

生活就是没有生活

上周景路说他写了一篇关于镇江的文章上了my0511首页,着我去看一下。
我离开镇江也有6年多,总还是想着它的好:
小——小到走路可以逛完整个市区。
惬意——朝九晚五,吃完晚饭可以去长江路散步,去城市客厅小憩。
房价便宜——只有南京的一半不到
交通便利——京沪铁路,宁沪高速
美食众多——锅盖面、小笼包、鸭血粉丝、肴肉
人杰——萧统、沈括
地灵——金山、焦山、南山

有人说镇江太落后,好单位少,工资低。
这没错,可恰恰正因为如此,才有镇江现在休闲的氛围。
试想一下,镇江企业多起来了、房价涨了、高楼盖起来了,现在的好生活还会长久吗?

镇江这么好,我干吗不回去?
(更多…)

双击还是单击?

女朋友说她们医院的那个电脑系统实在太难用了。每次录入数据的时候都浪费很多时间,而且很容易出错。
我去看了一下,有一个界面是这样的
/wp-content/uploads/200706/21_222918_mouse.jpg

点击查看

其中时间是经常需要修改的。为了快速修改,她必须尽可能快的点击鼠标,可是连续点击鼠标就形成了双击。操作产生的结果并不是她想要的。
鼠标单击操作和双击操作本来就比较难以区分,双击不就是由两次连续单击构成的吗?
以至于我老爸在每次双击的时候都比单击时用力的多。也许是他记住了当时电脑课老师说的“嗒嗒两声”吧。

在类似的操作行为上产生两种不同的输出结果,确实很让人迷惑。于是我把界面改成了下面的样子,不知道会不会好一点。
/wp-content/uploads/200706/21_222944_mouse_plus.jpg
(更多…)

混迹于互联网的一介草民,
研究领域:互联网产品、昆虫

关注我:

最新评论: