html及body设置100%以后

通常在页面的css中，如果当内容不够一屏时候需要body或其他内容自动填充页面并且垂直居中，这里不讨论垂直居中，而就自动填满这种情况，例如

<body><div id="wrapper">hello</div></body>

很显然hello所在的wrapper不足以填充整个body区域，而即使设置wrapper的css为height:100%，你会发现并不起作用，因为这个100%本身就是一个相对高度，所以需要设置一下

html,body{height:100%;marigin:0;padding:0}

后面的margin及padding是为了清楚body的浏览器默认样式避免垂直滚动条。

很不幸的是，如果使用不当，对html及body设置了height:100%之后可能遇到的状况：
1.这里的100%只会表现在相对显示窗口高度的大小，而不是页面的100%高度；
2.清楚浮动失效，一般在遇到这种代码时候

<div id="main"><div id="sidebar">side</div><div id="content">content</div></div>

控制sidebar浮左，content浮右以后，需要清楚一下浮动，有很多种方法，例如在main最后插入一个clear:both的div或用纯css方法，但是当设置了html,body{height:100%}的时候会发现失效了；
3.仍然会出现处置滚动条，这是因为某些元素设置的margin及padding混乱造成的，所以当一个页面可能超过一屏的时候最好不要用这个属性
4.还有个奇怪的问题昨天遇到的，但是忘记了，，，回头再接着写

Attention, Zin 的交互设计之路。

User interface, user experience and interactive design.

Zin 2008-9-2 15:15:30