使用 CSS 的 iTunes 样式布局答案

【问题标题】：iTunes style layout using CSS使用 CSS 的 iTunes 样式布局
【发布时间】：2010-05-05 13:51:32
【问题描述】：

创建具有以下功能的 iTunes 样式布局的最佳方法是什么（使用 HTML/CSS）：

左列具有固定宽度但流体高度（滚动条用于溢出）（下方为蓝色）
一个主要内容列流体宽度和高度（溢出的滚动条）（下面的红色）
右下角具有固定宽度和高度的盒子仍然粘在底部浏览器？（下方为绿色）

这是一个例子：

如果真的没有纯 CSS 解决方案，我很乐意使用 Javascript/JQuery。

谢谢！

【问题讨论】：

另外，感谢Cappuccino 上面的图片。卡布奇诺很棒，但对于这个项目来说有点大。
你尝试过创建这个吗？

标签： jquery html css layout itunes

【解决方案1】：

http://fiddle.jshell.net/RAkKN/show/:



标题>

身体 {
边距：0；
填充：0；
}
分区 {
不透明度：0.5；
}
#red { 背景：红色； }
#green { 背景：石灰； }
#蓝色{背景：蓝色； }
＃绿色，
＃蓝色的 {
宽度：200px；
位置：固定；
左：0；
}
＃绿色 {
底部：0；
高度：200px；
}
＃蓝色的 {
底部：200px；
顶部：0；
溢出：自动；
}
＃红色的 {
边距：0 0 0 200px；
}
span { /* 强制溢出，例如 */
显示：块；
高度：3000px；
}










正文>

【解决方案2】：

我建议您查看ExtJs。

它可以让你做相当复杂的灵活布局，并且非常适合这种应用程序，例如portal example。

【讨论】：

你不需要 JS，当然也不需要整个库。

【解决方案3】：

我的看法...你会想要 一些东西 像下面的 psudeo-css （这不起作用 IRL，你不希望 #left 和 #right 以百分比测量 [这应该用javascript设置]）。

html, body{height:100%;width:100%;margin:0;padding:0;}
    .clearfix{/****the usual clearfix code****/}
        #left {height:100%;float:left;width:25%;}
            #top{height:75%;overflow:auto;}
            #bottom{height:25%;}
        #right {height:100%;width:75%;float:left;overflow:auto;}

你也可以使用，我敢说...表格！

最后..你需要使用 javascript。

【讨论】：