Фиксированный верхний колонтитул, фиксированный нижний колонтитул, полноразмерный прокручиваемый столбец столбцов

Question

Я борюсь с макетом приложений. Я хотел бы реализовать его только с HTML & CSS, но отчаяние приближается. Мне нужно:

• Фиксированная высота, ширина 100%, статический заголовок
• Фиксированная высота, ширина 100%, статическая колонтитула
• Фиксированная ширина область содержимого, по центру & полная остающийся высота

потребности содержание площадь:

• 2 колонки, оба полная высота

Вышеприведенное достаточно простое, но может потребоваться изменить для размещения следующей части.

Каждый столбец необходимо:

• Статические Header
• Статический Footer
• Scrollable область содержимого между заголовком и колонтитул

Я провел день пробовать различные подходы (даже один на основе - gasp-tables) без реального успеха.

|--------------------------------------------------| 
| Fixed height, 100% width, static page header  | 
|----|-------------------|--------------------|----| 
    |Fixed Col 1 header | Fixed Col 2 header | 
    |-------------------|--------------------| 
    | Scroll overflow | Scroll overflow | 
    | Fixed width  | Fixed width  | 
    | Full height  | Full height  | 
    |     |     | 
    |     |     | 
    |-------------------|--------------------| 
    |Fixed Col 1 footer | Fixed Col 2 footer | 
    |     |     | 
|----|-------------------|--------------------|----| 
| Fixed height, 100% width, static page footer  |  
|             |    
|--------------------------------------------------| 

Answer 1

Хорошо, посмотрев на свою скрипку и рассказывая, что раскладки таблиц - это дьявол. Вот мое решение. Примечание: прокрутка не работает, потому что вы не предоставляли контент ... так что вам может понадобиться обмануть это.

Так вот разметка

<header> 
    header 
</header> 
<main> 
<div class="col1"> 
    <header>header</header> 
    <div class="foo"> 
     some junk 
    </div> 
    <footer>footer</footer> 
</div> 
<div class="col2"> 
    <header>header</header> 
    <div class="foo"> 
     more junk 
    </div> 
    <footer>footer</footer> 
</div> 
</main> 
<footer> 
    footer 
</footer> 

и вот стили

body{ 
    height:100%; 
} 
header, footer{ 
width:100%; 
height:50px; 
background-color:pink; 
} 
main{ 
margin:0 auto; 
height:100vh; 
background-color:blue; 
} 
.col1, .col2 { 
width:50%; 
float:left; 
} 


.col1{ 
background-color:red; 
height:100%; 
} 
.col2{ 
background-color:green; 
height:100%; 
} 
.col1 header, .col1 footer { 
    background-color:purple; 
} 
.col2 header, .col2 footer { 
background-color:yellow; 
} 
.col1 footer{ 
position:relative; 
} 
.foo{ 
width:100%; 
height:82%; 
overflow:scroll; 
} 

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

Answer 2

ОК, у меня есть рабочая версия, протестированная в IE & Firefox.

http://jsfiddle.net/vna48w5w/3/

границы коробка была весьма полезной.

-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;