Как лучше всего (используя HTML/CSS) создать макет в стиле iTunes со следующими функциями:
- левый столбец с фиксированной шириной, но изменяемой высотой (полосы прокрутки для переполнения) (СИНИЙ внизу)
- столбец основного содержимого с плавной шириной и высотой (полосы прокрутки для переполнения) (КРАСНЫЙ ниже)
- нижнее правое поле с фиксированной шириной и высотой, которое остается в нижней части браузера? (ЗЕЛЕНЫЙ внизу)
Вот пример:
Я рад использовать Javascript/JQuery, если на самом деле нет чистого решения CSS.
Спасибо!
Ответ 1 · рейтинг 2 · reisio
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.
Ответ 2 · D'Arcy Rittich
Я бы посоветовал вам посмотреть на ExtJs.
Это позволит вам создавать довольно сложные гибкие макеты и будет хорошо работать для такого типа приложений, например, пример портала.
Ответ 3 · рейтинг -1 · David Murdoch
Как я это вижу... вам нужно что-то вроде следующего псевдо-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.
