Макет в стиле iTunes с использованием CSS

Как лучше всего (используя HTML/CSS) создать макет в стиле iTunes со следующими функциями:

  • левый столбец с фиксированной шириной, но изменяемой высотой (полосы прокрутки для переполнения) (СИНИЙ внизу)
  • столбец основного содержимого с плавной шириной и высотой (полосы прокрутки для переполнения) (КРАСНЫЙ ниже)
  • нижнее правое поле с фиксированной шириной и высотой, которое остается в нижней части браузера? (ЗЕЛЕНЫЙ внизу)

Вот пример:

Пример макета iTunes, как описано выше

Я рад использовать Javascript/JQuery, если на самом деле нет чистого решения CSS.

Спасибо!


html layout jquery css itunes
person Liam    schedule 05.05.2010    source источник
comment
Кроме того, я полностью благодарен ребятам из Cappuccino за изображение выше. Капучино отличный, но немного большой для этого проекта.   -  person Liam    schedule 05.05.2010
comment
Вы дали попытку создать это?   -  person Gabe    schedule 05.05.2010

Ответы (3)


arrow_upward
2
arrow_downward

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.

person reisio    schedule 05.05.2010

arrow_upward
0
arrow_downward

Я бы посоветовал вам посмотреть на ExtJs.

Это позволит вам создавать довольно сложные гибкие макеты и будет хорошо работать для такого типа приложений, например, пример портала.

person D'Arcy Rittich    schedule 05.05.2010
comment
Для этого вам не нужен JS и уж точно не целая библиотека. - person reisio; 24.02.2013

arrow_upward
-1
arrow_downward

Как я это вижу... вам нужно что-то вроде следующего псевдо-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.

person David Murdoch    schedule 05.05.2010