Невозможное расположение?
Я начинаю думать, что это невозможно, но думало, что я спрошу Вас парни.
В основном это - расположение на 2 столбца, но "бизнес" хочет следующее:
- Всегда поднимайте все окно браузера
- Разместите изменение размеров окна браузера
- Левый столбец будет зафиксированной шириной, но та ширина должна быть гибкой от от страницы к странице.
- Левый столбец имеет регион наверху с фиксированной высотой.
- Левый столбец имеет нижний регион. Это должно занять остающееся вертикальное место окна браузера. Если содержание будет очень большим, то оно будет иметь полосу прокрутки только для того региона.
- Правый столбец должен занять остающееся горизонтальное место окна браузера.
- Правый столбец имеет регион наверху с фиксированной высотой.
- Правый столбец имеет нижний регион. Это должно занять остающееся вертикальное место окна браузера. Если содержание будет очень большим, то оно будет иметь полосу прокрутки только для того региона.
Я попробовал все... отделения, пущенные в ход, абсолютно расположенные, таблицы, отделения в таблицах...
Это даже возможно?
Вот изображение того, на что оно должно быть похожим: http://imgur.com/zk1jP.png
4 ответа
Это совсем не невозможно, и вам не нужен javascript. Если вам небезразличен этот браузер, вам понадобятся некоторые хаки для IE6.
Ключевым моментом в компоновке является тот факт, что вы можете установить одно или несколько крайних положений на абсолютно позиционированном элементе. Вот хорошая статья о технике: http://www.alistapart.com/articles/conflictingabsolutepositions/
Вот демонстрация: http://www.spookandpuff.com/examples/2col2section.html
и источник:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>2 col, 2 section layout.</title>
<style type="text/css" media="screen">
#leftColumn {
position:absolute;
top:10px;
bottom:10px;
left:10px;
width:400px;
}
#rightColumn {
position:absolute;
top:10px;
bottom:10px;
right:10px;
left:410px;/* This must equal the total width of the #leftColumn, incl padding, border, margin, etc. */
}
.topSection{
position:absolute;
top:10px;
height:120px;
left:10px;
right:10px;
padding:10px;
}
.bottomSection{
position:absolute;
bottom:10px;
top:160px; /* This must equal the total height of the .topSection, incl padding, border, margin, etc. */
left:10px;
right:10px;
padding:10px;
overflow-y:auto;
}
/* Debug styles */
body {background-color:#CCC;}
div {border:1px solid #FFF;}
#leftColumn {background-color:#7EF4B0;}
#rightColumn {background-color:#EEF4A7;}
#leftColumn .topSection{background-color:#56A97A;}
#rightColumn .topSection{background-color:#D6D06D;}
</style>
</head>
<body>
<div id="leftColumn">
<div class="topSection">
<p>Left column, top section.</p>
</div>
<div class="bottomSection">
<p>Left column, bottom section.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="rightColumn">
<div class="topSection">
<p>Right column, top section.</p>
</div>
<div class="bottomSection">
<p>Right column, bottom section.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
Есть несколько уловок: Во-первых, я тестировал это только в Firefox, чтобы дать вам общее представление - есть некоторые необходимые исправления для IE, которые я не добавил: проверьте список отдельно от статьи наверху подробности.
Я добавил 10 пикселей вокруг всех полей, чтобы проиллюстрировать идею - вы, вероятно, установите для них значение 0 в реальном макете.
Вы можете установить высоту .topSection по-разному между столбцами с некоторыми правилами, например:
#leftColumn .topSection {height:xxx}
#leftColumn .bottomSection {top:xxx}
#rightColumn .topSection {height:yyy}
#rightColumn .bottomSection {top:yyy}
Я бы использовал контейнер с классом (или классом в теге body), чтобы указать ширину левого столбца, что-то вроде :
#container.narrow #leftColumn {width:100px}
#container.medium #leftColumn {width:200px}
#container.wide #leftColumn {width:400px}
Это позволяет вам определять набор «шаблонов» ширины, между которыми вы можете переключаться.
Возможно, стоит подумать об использовании JavaScript для решения проблем с разметкой. Хотя я знаю, что это не идеально, это решение, которое я успешно использовал раньше, когда пытался работать с макетами в полный рост.
Допустимо получить описываемый макет без прокручиваемых столбцов на всю высоту, тогда просто используйте немного JavaScript, чтобы они заполняли всю высоту браузера
Вы добьетесь этого с помощью фальшивых колонн.
Вы можете использовать эту технику, чтобы сделать два вертикальных разделения.
Если вы хотите отдельные полосы прокрутки (пожалуйста, не надо, вы заставите плакать котенка юзабилити), вы можете сделать так, чтобы каждая из вертикальных полос имела max-height: 100%; overflow: auto;, чтобы они прокручивались при достижении 100% высоты.
Для синих полос с "плавающей вершиной" можно задать родительскому разделению position: relative; padding-top: 150px;, а затем задать синей полосе position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; overflow: hidden;. (Я не уверен насчет ширины 100%)
.
Тогда зеленый и желтый контент не будет перекрывать его.
Я считаю, что это довольно легко сделать, если у вас есть возможность использовать фреймворк ext.js. Будет обновляться кодом, если никто другой не предложит лучшего ответа и если вам интересно.
Обновление: вот код. Протестировано и отлично работает даже с IE6. Недостатком по сравнению с решением только с css является: (i) требуется JavaScript (скорее всего, приложение уже использует JS); (ii) Требование Ext.js (которое может быть или не быть слишком выполнимым):
Обратите внимание на использование style = "height: 100px;" int html и autoScroll: true ] в коде JavaScript. Это позволяет обеспечить фиксированную высоту двух верхних панелей и переполнение полосами прокрутки в нижних двух панелях.
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout: 'border',
resizable: false,
items: [
{
region: 'west',
id: 'west-panel',
split: false,
width: 300,
margins: '0 0 0 0',
layout: 'border',
items: [{
region: 'north',
contentEl: 'west1',
border: false
},{
region: 'center',
contentEl: 'west2',
border:false,
autoScroll: true
}]
},
{
region:'center',
id:'center-panel',
split:false,
margins:'0 0 0 0',
layout:'border',
items: [{
region: 'north',
contentEl: 'center1',
border:false
},{
region: 'center',
contentEl: 'center2',
border:false,
autoScroll: true
}]
}
]
});
});
и html:
<div id="west1" style="height: 70px;background-color: #AAA;">
<p>Hi. I'm fixed.</p>
</div>
<div id="west2">
<p> long content goes here</p>
</div>
<div id="center1" style="height: 100px;background-color: #333;color: #FFF;">
<p>Hi. I'm fixed too.</p>
</div>
<div id="center2">
<p> long content goes here</p>
</div>
Демо будет доступно позже, опять же, если вам или кому-то интересно. Пожалуйста, укажите это, если можете.