Задача определения позиционирования CSS

Question

Это проблема, с которой я сталкивался несколько раз за эти годы, и я всегда отказываюсь от использования JavaScript для выполнения вычислений на мероприятии изменения размера страницы. Можно ли это сделать с помощью чистого CSS?

мне нужно вылепить макет CSS, как это:

 
+--------------------------- 
header --> 
+--------------------------- 
menu | scrollable content 
     | ---> 
    | | | 
    v | v 
     | 
+--------------------------- 
footer --> 
+--------------------------- 

заголовка Фиксированная высота должна придерживаться верхней и в горизонтальном направлении, чтобы встретить крайний правый край окна. Нижний колонтитул с фиксированной высотой должен придерживаться нижней части и также горизонтально расширяться, чтобы соответствовать крайнему краю окна. Меню с фиксированной шириной должно лежать влево и расширяться, чтобы соответствовать верхнему и нижнему колонтитулу. Область содержимого должна заполнить оставшееся пространство. Область содержимого может прокручиваться, но никогда сама страница.

Answer 1

Если вам не нужна поддержка IE6, да.

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

.Header { 
    width: 100%; 
    height: 100px; 
} 
.Menu { 
    position: absolute; 
    left: 0; 
    top: 100px; 
    bottom: 50px; 
    width: 175px; 
} 
.Footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 50px; 
    width: 100%; 
} 
.Content { 
    position: absolute; 
    width: auto; 
    height: auto; 
    left: 175px; 
    top: 100px; 
    right: 0; 
    bottom: 50px; 
    overflow: scroll; 
} 

Я действительно не проверял это.

Answer 2

Это очень легко сделать в CSS во всех браузерах, включая IE6, если вы не используете таблицы и только DIV. Не уверен, какой контент вы будете показывать, хотя ... это табличные данные?

<div class="fixed-header"></div> 
<div class="menu-content-group"><div class="menu"><div class="menu-child"></div></div><div class="content"><div class="content-child"></div></div></div> 
<div class="fixed-footer"></div> 

html, body { 
    width:100%; 
    height:100%; 
} 

.fixed-header, .fixed-footer { 
display:block; 
position:absolute; 
width:100%; 
height:50px; /* whatever height you want for your header */ 
float:left; 
top:0; 
left:0; 
z-index:2; 
} 

.fixed-footer { 
top:; 
bottom:0; 
} 

.menu-content-group { 
    display:block; 
    position:absolute; 
    width:100%; 
    height:100%; 
    float:left; 
    top:0; 
    left:0; 
} 

.menu { 
    display:block; 
    position:absolute; 
    width:100px; 
    height:100%; 
    top:0; 
    left:0; 
    z-index:1; 
} 

.content { 
    display:block; 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    overflow-x:hidden; 
    overflow-y:auto; 
} 

.menu-child { 
    display:block; 
    position:relative; 
    width:100px; 
    height:auto; 
    top:50px; 
} 

.content-child { 
    display:block; 
    position:relative; 
    width:100%: 
    padding:50px 0; 
    padding-left:100px; 
} 
 

Answer 3

Это легко с помощью DIVs и позиции: фиксированный, если ваши целевые браузеры поддерживают его.

См http://www.quirksmode.org/css/contents.html

вы должны поддерживать IE6 ли? (браузер по умолчанию в не обновляемом WinXP) Если нет, это определенно выполнимо.

Answer 4

См., Например, источник this и this. (Или просто google for more ..)

Answer 5

Возможно, вы можете начать с этой статьи: How to keep footers at the bottom of the page. Затем вы примените технику к этому 'Left Menu' 2 Column Liquid Layout (Percentage widths).

Answer 6

Если я правильно понимаю это, это может сработать. Установив div вокруг фактического материала, который вам нужно развернуть, и установите его для отображения в виде таблицы и любых частей, таких как боковая панель, чтобы отображать как ячейки, вы можете получить равные столбцы. Исправьте нижний колонтитул и заголовок в окне с фиксированным и установите на них индекс z-index. Я проверил нижний код в сафари, это не будет работать в ie6 без javascript для вычисления высот.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<style type="text/css"> 
*{margin:0; padding:0;} 
    #header{ height:50px; width:100%; position:fixed; top:0; background:red; z-index:99999;} 
    #group{display:table-row; clear:both; width:100%; position:absolute; top:50px; overflow:hidden;} 
    #sidebar{display:table-cell; width:200px; background:#e3e; float:left; height:100%; vertical-align:top; position:fixed; top:50px; padding-bottom:150px;} 
#sidebar-inside{padding-bottom:150px; max-height:500px; overflow:hidden;} 
    #content{ margin-left:200px;} 
#footer{ height:50px; width:100%; position:fixed; bottom:0; background:red; z-index:99999;} 
</style> 

</head> 
<body> 
<div id="header"><!-- CONTENT HERE --></div> 
    <div id="group"> 
    <div id="sidebar"> 
    <div id="sidebar-inside"></div> 
     </div> 
    <div id="content"></div> 
    </div> 
    <div id="footer"></div> 

</body>