Question

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

左列，宽度固定但是流体高度（滚动条为溢出）（下面蓝色）
主要内容列流体宽度和高度（溢出的滚动条）（下面的红色）
右下角宽度和高度固定的盒子仍然坚持到底部浏览器吗？（下面的绿色）

以下是一个例子：

iTunes layout example as described above

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

谢谢！

Answer 1

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>

这不支持IE6;在IE6中你可以通过多种不同的方式获得完全相同的东西或仅仅是类似的东西（即使没有JavaScript），但是最简单的可能只是为了使用JavaScript。< / p>

Answer 2

我建议你看看ExtJs。

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

Answer 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。

使用CSS的iTunes样式布局

3 个答案: