可能在下个月月中，我们部门将会向中国所有的CSS设计人员开放一个网站（目前我还不能透露这个网站的域名)，并且同时展开一个CSS大赛。基本上的方式就是只要通过提交一个CSS以及图片组合的模板，就改变该网站的整个外观，以便让更多的开发人员/设计人员了解CSS的强大威力。在这个网站上进行这个赛事是我的创意。
当然这个创意的来源是来自于VisitMix,在这个网站当中有一个子栏目叫ReMix，这其实就是一个CSS大赛，在里面的Gallery当中，有很多网友上传的CSS模板，感兴趣的话，你只需要点击某一个item，就会把整个网站的外观风格完全变一个样子（其实这个创意可能最初来自于CSS禅意花园)，记得在去年第一次见到这个网站的时候，感觉非常新奇，那时候就有一个想法，我可不可以把博客堂也做成这个样子？
大家都知道，无论是.Text还是后来的SubText或者BlogEngine，还有DasBlog，其实所使用的模板机制大同小异，除了CSS外，还都使用了类似于Master方式的一个文件来控制所有控件的布局，以便产生更多的风格。有没有可能把这个Master式的控制文件移掉，而只使用CSS或者图片呢？所以我就开始做了一个实验。但至少到现在为止，尚未解决一些关键性难题。以下这些问题我曾经向三位CSS高手求教，答案都是很难实现，或者只能兼容某种浏览器。
好了，以下是我的问题，如果大家有解答，欢迎直接通过邮件与我联系。(joy ^ joycode.com，把^替换为@)。
有以下的HTML架构，希望实现以下三种不同的用户体验，并且兼容IE 6+，Firefox 1.5+以上的浏览器。
这是标题
这是主内容
- 主页
- 目录1
- 目录2
这是其它内容</div>
</div>
第一种布局:
Header内容 Sidebar内容(width:200px) Content主内容(Width:Screen.Width-200px); Footer内容
第二种布局
Header内容 Stats内容（Width:200px) Content(Width:Screen.Width-400px) Sidebar当中除Stats之外的内容（Width：200px) Footer
第三种布局
打赏作者
Header内容 Stats内容（由竖直排列改为水平排列） Sidebar内容，除Stats之外的内容(width:200px) Content内容(Width:Screen.Width-200px) Footer内容 “关于CSS的小问题”的30个回复
发表评论
shafa!
手有点生了。
1、入门。
2、方法很多，但要每个部分都不定高比，需要JS。
3、约等于入门。stats相对定位、绝对定位都可以。至于footer，相对定位、内容绝对定位都可以。
css不是银弹。其实这种问题一点意思都没，算了，写都写了就不删了。
第一第三很容易实现，第二有点麻烦，可能需要脚本配合~，纯粹的CSS好像实现了，至少我做不到，那位高手可以？
谢谢爆牙齿。
的确我在一段时间把CSS当作银弹了，主要也是受了VisitMix的影响，现在想来，VisitMix很多内容都是固定的，所以大部分的CSS都是使用了绝对定位更改了布局。有些Gallery中的item甚至还注明可以应用于全站，这就说明大部分items其实并不能应用于其它页面。
包括css大赛也没意思，呵呵，2004年9月的时候blueidea就举办过我也参加过，但也没搞第二次了，没啥意义。
2.1的CSS并不强大，再加上现在浏览器的不配合，前端是混乱的。
而且和当年不一样，当年CSS懵懂，资料稀缺，于是很多技巧创意产生，而如今已经三年过去了，2.1的CSS几乎已经走到强弩之末了，能挖掘的技巧国内外都挖得差不多了，几乎就是能就能，不能你顶你肺也不能。反而悬念在设计上，在架构上，在三者的取长补短配合上。
我主要是想更改一下博客堂的模板方式，因为如果允许用户上传ASCX或者Master页面，毕竟还是有一定风险的，而我想完全通过CSS来实现模板机制，这一年来我一直在为这事头疼。:(
绝对定位+背景，什么效果都能给你弄出来
Screen.Width是难点，IE中可以通过表达式的方式实现，FF中就郁闷了
@Tinytian：
并不一定是Screen.Width，我的意思是剩余的部分可以撑满整个屏幕。
@开心就好老大哥：
在CSS社区估计最烦恼的就是如何制作自动适应整个屏幕的页面了，特别是当其中一列固定的宽度，让另外一列如适应剩下的部分
刚才没有看清您的题目，所以说第一第二很容易实现的，后来再看不是那么回事
🙂
小弟不才,
第一题用CSS实现了,不过在Content内添加了一个DIV才得以实现.
不才，只做了二题。
第一题比较正常，这个布局之前也讨论不少，这里不多说，如果有兴趣可以去我blog翻翻。
第二题只做到FF、IE7正常，IE6下高度自适应须JS支持。
第三题就BT了，IE6下由于position的宽会被父标签的宽限制，所以IE6下导航无能为力。希望有高手可以指点下。：）
如果楼主已经做出来，请分享下。
这个,开心啊,为什么不使用XSLT呢? 这用XSLT是最最最方便的啊…
我们现在都用XSLT做布局修改…….
咕唧~咕唧~
我都搞出来啦~
还是可以不用js的~
关于CSS的小问题的解答~
http://www.misuisui.com/weblog/article.asp?id=624
随随哥，不要用撑文字的方式来忽悠人……看看多个浏览器如何。
http://www.twinsenliang.net/test/sb1.htm
只要分离了，CSS根本就不会是一个问题。楼主应该待在微软先把那个垃圾IE干掉再说吧。
现在，追求纯CSS等于在技术上较劲。
CSS+javacript一起设计版面更容易达到理想的效果。
彪哥的这招不错啊，已经更新到我的哪边啦~
margin-bottom:-32767px; padding-bottom:32767px;
楼上土鳖
楼上
土鳖
开心啊 得支持你啊。。不支持不行。。
开心，开心啊！~
Myspace的用户模板全是用CSS实现的。用户可以自己写CSS，改变profile的外观。
XSLT…..
首先三个用表格都是极易实现的。
第一个可以用CSS实现并不是很难
在博客堂很难发现让人惊喜的文章了，加油～～～
第三题如果Footer的高度受到Sidebar和Content的影响，那么就是非常典型的剩余部分问题，Table可以轻易的解决，而纯CSS则几乎无法解决（在不借助JS的情况下）。
这个问题我常常用来驳斥CSS银弹论的人。
朕也来了..
http://www.tommyfan.com/css-prob/test_1.html
<p>
题目来自 <a href="http://blog.joycode.com/" rel="tag">开心就好</a> 写的一篇文章 "<a href="http://blog.joycode.com/joy/archive/2007/08/28/107691.aspx">关于<acronym title="Cascading Style Sheets">CSS</acronym>的小问题的解答</a>",很高兴国内也有人有类似的活动出来,支持笔者能提供这样的网站.但,此类活动不仅考验做题者的<em><acronym title="Cascading Style Sheets">CSS</acronym></em>,更考验了出题者的<strong><acronym title="Extensible HyperText Markup Language">XHTML</acronym></strong>结构合理性,就像这道题,结构上就会不少可以挑的地方,<a href="http://www.csszengarden.com/"><acronym title="Cascading Style Sheets">CSS</acronym>禅意花园</a>的结构虽然还不是很完美,但也是积累了不少经验写出来的结构,希望笔者能够在构建这个网站的时候注意编写<strong><acronym title="Extensible HyperText Markup Language">XHTML</acronym>结构的合理性</strong>.
</p>
<p>
再来谈谈这三道题的实现,如果要完美还原原稿,用<acronym title="Cascading Style Sheets">CSS</acronym>是不太可能的事.在实验中遇到 "自适应高度" 、"还原border" 、"内容不可选"等问题,我这里放弃了<acronym title="Cascading Style Sheets">CSS</acronym>自适应高度的应用,用脚本调整了内容的高度自适应.当然,禁用了脚本之后也可以正常显示.个人觉得js来解决自适应高度是比较合适的方案.
</p>
s5s5 :景仰！！
3只是容器换了而已。。。
不然就overflow掉footer也行。。。
2 的话，我的理解是要获取分辨率的脚本配合下。。。
用百分比。。。。。
1的话，要做到在firefox中兼容，也要用overflow….