使用CSS实现类似iTunes的布局

Question

使用CSS实现类似iTunes的布局

jqueryhtmlcsslayoutitunes

3

使用HTML/CSS创建一个具有以下特征的iTunes样式布局，最佳方法是什么：

具有固定宽度但可滚动的高度（用于溢出）的左列（下面为蓝色部分）
具有流体宽度和高度（用于溢出）的主内容列（下面为红色部分）
一个固定宽度和高度的底部右侧框，保持粘在浏览器底部？（下面为绿色部分）

这是一个例子：

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

谢谢！

- Liam

此外，对于上面的图片，要归功于Cappuccino的开发人员。Cappuccino非常棒，但对于这个项目来说有点过大了。 - Liam

你尝试过创建这个吗？ - Gabe

3个回答

1

我建议你看看ExtJs。

它可以让你做出相当复杂灵活的布局，并且非常适合这种类型的应用，例如门户网站示例。

- D'Arcy Rittich

你不需要使用JS来完成这个任务，更不需要整个库。 - reisio

-1

以我的看法…你会想要类似以下伪 CSS 的某些东西（这不会在实际中工作，你不希望 #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。

- David Murdoch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- reisio · Accepted Answer

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。