可能在下个月月中，我们部门将会向中国所有的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+以上的浏览器。
<div id=”Header”>这是标题</div>
<div id=”Main”>
<div id=”Content”>这是主内容</div>
<div id=”Sidebar”>
<div id=”Stats”>
<ul><li>主页</li><li>目录1</li><li>目录2</li></ul>
</div>
<div class="other">这是其它内容</div>
</div>
</div>
<div id=”Footer”>这是结尾</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内容 | |
打印 | 张贴于 2007-08-28 13:12:00 | Tag:暂无标签
留言反馈
不然就overflow掉footer也行。。。
2 的话，我的理解是要获取分辨率的脚本配合下。。。
用百分比。。。。。
1的话，要做到在firefox中兼容，也要用overflow....
题目来自 <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>
http://www.tommyfan.com/css-prob/test_1.html
这个问题我常常用来驳斥CSS银弹论的人。
第一个可以用CSS实现并不是很难
土鳖
margin-bottom:-32767px; padding-bottom:32767px;
CSS+javacript一起设计版面更容易达到理想的效果。
http://www.twinsenliang.net/test/sb1.htm
只要分离了，CSS根本就不会是一个问题。楼主应该待在微软先把那个垃圾IE干掉再说吧。
我都搞出来啦~
还是可以不用js的~
关于CSS的小问题的解答~
http://www.misuisui.com/weblog/article.asp?id=624
我们现在都用XSLT做布局修改.......
第一题比较正常，这个布局之前也讨论不少，这里不多说，如果有兴趣可以去我blog翻翻。
第二题只做到FF、IE7正常，IE6下高度自适应须JS支持。
第三题就BT了，IE6下由于position的宽会被父标签的宽限制，所以IE6下导航无能为力。希望有高手可以指点下。：）
如果楼主已经做出来，请分享下。
第一题用CSS实现了,不过在Content内添加了一个DIV才得以实现.
在CSS社区估计最烦恼的就是如何制作自动适应整个屏幕的页面了，特别是当其中一列固定的宽度，让另外一列如适应剩下的部分
刚才没有看清您的题目，所以说第一第二很容易实现的，后来再看不是那么回事
:-)
并不一定是Screen.Width，我的意思是剩余的部分可以撑满整个屏幕。
2.1的CSS并不强大，再加上现在浏览器的不配合，前端是混乱的。
而且和当年不一样，当年CSS懵懂，资料稀缺，于是很多技巧创意产生，而如今已经三年过去了，2.1的CSS几乎已经走到强弩之末了，能挖掘的技巧国内外都挖得差不多了，几乎就是能就能，不能你顶你肺也不能。反而悬念在设计上，在架构上，在三者的取长补短配合上。
的确我在一段时间把CSS当作银弹了，主要也是受了VisitMix的影响，现在想来，VisitMix很多内容都是固定的，所以大部分的CSS都是使用了绝对定位更改了布局。有些Gallery中的item甚至还注明可以应用于全站，这就说明大部分items其实并不能应用于其它页面。
1、入门。
2、方法很多，但要每个部分都不定高比，需要JS。
3、约等于入门。stats相对定位、绝对定位都可以。至于footer，相对定位、内容绝对定位都可以。
css不是银弹。其实这种问题一点意思都没，算了，写都写了就不删了。