DIV для модального дисплея с фиксированным верхним и нижним колонтитулом, прокручиваемым контентом и фиксированными значениями пикселей для высоты контента

Question

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

Вот что я хочу:

• DIV с 65 ширина%, 60% высоты, в центре на странице
  • Заголовок: 100px высокий, фиксированное положение
  • Содержание: Все, что осталось в DIV высокий, фиксированное положение, прокручивать содержание
  • нижнего колонтитула: 100px высокий, фиксированное положение

Edit: JSFiddle

Вот моя попытка:

html, mbody { 
    overflow:auto; 
} 

#mholder{ 
    padding: 10px 10px 10px 10px; 
    width: 65%; 
    height: 60%; 
    background-color: white; 
    position: absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin: auto; 
} 

#mheader{ 
    position: fixed; 
    height: 100px; 
    left:0; 
    top:0; 
    width: 100%; 
} 

#mbody{ 
    width:100%; 
} 

#mfooter{ 
    height:100px; 
    width:100%; 
    position: fixed; 
    left: 0; 
    bottom: 0; 
} 

Вот что у меня есть на странице:

<div id="mholder"> 
    <div id="mheader">Header text</div> 
    <div id="mbody">Long body text...</div> 
    <div id="mfooter">Footer text</div> 
</div> 

То, что происходит в том, что заголовок появляется в самом верхнем левом моего страница, а не модальный дисплей; то же самое для нижнего колонтитула внизу справа; модальная область (которая должна быть идентифицирована на белом фоне), определенно, не составляет 65%/60% страницы, а html mbody - это своего рода наложение на квадрат mholder div.

Edit: JSFiddle

Answer 1

Я думаю, что вам нужно

position : absolute; 

вместо fixed для заголовка и колонтитул. Исправлено относительно экрана, когда абсолютный и относительный фактически зависят от последнего слоя с нестатической позицией.

Сценарий будет оценен по достоинству.

EDIT: that fiddle больше похоже на то, что вы ожидали? Итак, похоже, что position: absolute соответствует вашим потребностям в позиции заголовка и нижнего колонтитула.

Для этого вам просто нужно сделать то же самое, что и тело. Но тогда вы сталкиваетесь с новой проблемой. Вы хотели, чтобы ваш верхний и нижний колонтитулы имели фиксированный размер, но хотите, чтобы тело заполнило «отдых». Я не могу придумать решение, чтобы сделать это, за исключением того, что давая верхнему и нижнему колонтитулам высоту в процентах. Это то, что я сделал в своей скрипке. Так что это лучшее, что я мог найти.

Все три элементы absolute LY расположены, заголовок, расположенный с top: 0;, тело с top: 10%; инструкцией, и нижний колонтитулы с bottom: 0;.