网上关于如何将 footer 置于页面底部的文章太多了，我也照着做了几个，但效果不理想，总是有各种各样的问题。一般的原理都是将 footer 的相对于包含元素绝对定位，而包含元素的高度为百分比。原理很清晰，但我总是看不懂那些案例的代码。我试着按照这个原理，自己写了一个，发现在 Chrome 39 和...
CSS 中有趣的百分比值和元素之间莫名其妙的间距
2014-02-15 01:20 by ferrum, 阅读(723) 阅读, 推荐(0) 推荐, 收藏,
摘要：## CSS中有趣的百分比值CSS 中很多值都可以用百分比表示，这次只谈谈 height，因为上一篇文章让我想起某个曾遇见的问题。有次在学习响应式布局（Responsive Design），发现里面的数值大多是用 em 定义的，而百分比和 em 很相似，用 W3CSchool 的话说，**height: xx%; 基于包含它的块级对象的百分比高度**那么晚了，懒得写了，重点就是，如果要使目标元素的百分比高度值生效，那么它的包含对象也需要显式定义一个百分比值，没特殊需要的话就是 height: 100%;。因为大鱼吃小鱼，小鱼吃虾米。所以 html、body 也需要定义这个值。## 元素之间莫名 阅读全文
JavaScript 中 clientWidth、clientHeight 与滚动条的关系
2014-02-15 00:53 by ferrum, 阅读(697) 阅读, 推荐(0) 推荐, 收藏,
摘要：用 jQuery 写着一个相册，在测试过程中，发现点击缩略图，弹出大图后，页面会往左偏移一点，关闭大图后又回到原地。这个现象只在 Chrome 发生，不在 Firefox 发生。于是我很自然地想到，是浏览器默认样式的问题，于是用了个 html5-reset.css。问题解决（至少我以为）。结果后来又发生了同样的状况，这次我开始查看源代码，发生问题出自于 clientWidth 和 clientHight 这两个属性。这两个属性其实就是所谓的「视口」（viewpoint），就是浏览器窗口的大小，但是，这是不包括滚动条的。也就是说，在页面下拉生成滚动条后，clientWidth 会变小，在某些情况 阅读全文
浙公网安备 33010602011771号