使用CSS的iTunes样式布局
[英]iTunes style layout using CSS
问题描述
What is the best way (using HTML/CSS) to create an iTunes-style layout with the following features: 
使用HTML / CSS创建具有以下功能的iTunes样式布局的最佳方式是什么：
- a left column with a fixed width but fluid height (scrollbars for overflow) (BLUE below) 左列具有固定宽度但流体高度（滚动条用于溢出）（下方蓝色）
- a main content column with fluid width and height (scrollbars for overflow) (RED below) 具有流体宽度和高度的主要内容列（用于溢出的滚动条）（下面的RED）
- a bottom right box with fixed width and height which remains stuck to the bottom of the browser? 一个固定宽度和高度的右下方框仍然粘在浏览器的底部？ (GREEN below) （下面的绿色）
Here is an example: 这是一个例子：
I'm happy to use Javascript/JQuery if there really isn't a pure CSS solution. 如果真的没有纯CSS解决方案，我很乐意使用Javascript / JQuery。
Thanks! 谢谢！
3 个解决方案
解决方案1
2 已采纳 2010-05-05 15:15:57
http://fiddle.jshell.net/RAkKN/show/ : http://fiddle.jshell.net/RAkKN/show/ ：
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
div {
opacity: 0.5;
}
#red { background: red; }
#green { background: lime; }
#blue { background: blue; }
#green,
#blue {
width: 200px;
position: fixed;
left: 0;
}
#green {
bottom: 0;
height: 200px;
}
#blue {
bottom: 200px;
top: 0;
overflow: auto;
}
#red {
margin: 0 0 0 200px;
}
span { /* force overflow, for example */
display: block;
height: 3000px;
}
</style>
</head>
<body>
<div id="blue">
<span></span>
</div>
<div id="green"></div>
<div id="red">
<span></span>
</div>
</body>
</html>
This does not support IE6; 这不支持IE6; there are a number of different ways you can go to get the exact same thing or merely similar in IE6 (even without JavaScript), but the least tedious probably is just to use JavaScript . 有许多不同的方式，你可以去那里得到确切的同样的事情，或者仅仅IE6类似的（即使没有JavaScript），但至少繁琐可能是刚刚使用的JavaScript 。
解决方案2
0 2010-05-05 13:58:50
I would suggest you look at ExtJs for this. 我建议你看看ExtJs 。
It will let you do quite sophisticated flexible layouts, and would work well for this kind of app, eg, portal example . 它将允许您进行相当复杂的灵活布局，并且适用于此类应用程序，例如门户示例 。
解决方案3
-1 2010-05-05 14:06:46
The way I see it...you would want something like the following psudeo-css (this won't work IRL, you wouldn't want #left and #right measuring in percent [this should be set with javascript]). 我看到它的方式...你希望像下面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;}
You could also use, dare I say it...TABLES! 你也可以使用，我敢说...表格！
-- -
And lastly..you will need to use javascript. 最后..你需要使用javascript。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.