Как сделать гибкую высоту модальным с фиксированным заголовком

Question

Я создал действительно простой способ, который позволяет уменьшать или расширять контент без перехода с страницы - всегда оставляя 10% -ный край сверху и снизу. Когда страница не достаточно высока, чтобы содержать весь модальный контент, весь модальный становится прокручиваемым.

See jsfiddle here

Можно ли, используя только CSS, чтобы повторить это поведение, но только модальное тело будет прокручивать, поэтому заголовок всегда фиксирована. Я пробовал несколько вещей, но пока не придумал решение. Создание заголовка position: fixed почти работает, я должен переместить его поверх модального блока, а затем попытаться добавить отступы в тело, чтобы содержимое было видно под заголовком, что не сдвигает полосы прокрутки вниз. Я всегда предпочитаю исчерпывать все альтернативы css, прежде чем привязать некоторые js к размеру окна и вручную манипулировать ростом тела.

Answer 1

Применение max-height и overflow-y настройки в .body, а не .wrap ...?

Edit 1:

Ничего не получилось до сих пор в рамках ограничений, что предполагает либо JavaScript или отклоняясь от ограничений (с использованием% для высоты заголовка или точек краев).

Edit 2:

Вот initial demo с использованием% для высоты заголовка. Я добавил a px min-height в тег заголовка, чтобы предотвратить почти исчезновение заголовка на очень маленьких экранах за счет верхнего края (что уменьшено на очень маленьких экранах).

На экране> = 400px высокий, он должен работать в соответствии с требованиями (40px-заголовок с высотой 10%). Если заголовок был уменьшен по высоте, он поддерживал бы немного меньшие экраны (заголовок 30px с высотой 10% поддерживал бы экраны> = 300 пикселей). Вот demo с заголовком 30px.

Это неуклюжие решения, но это единственный, который появился без использования JavaScript.

Кроме того, обратите внимание, что я добавил h2 и .content метку и переместил padding:10px; там, чтобы избежать сочетания высоты% и заполнения в одних и тех же элементах (что приводит к более высокому росту, чем значение указанного%).

Answer 2

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

Это, как я решал вопрос:

• Дайте вашим элементы на границе ящик бокс-проклейки. Используйте обертку в центре и создайте ограничительную рамку. Это может быть жидким с минимальной шириной и максимальной шириной + процентами.
• Дайте элементу контента переполнение-y авто и максимальную высоту 100%;
• Использовать размер коробки: рамка;

Полный код должен быть что-то вроде этого:

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
.modal { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.8); 
} 
.wrap { 
    position: relative; 
    margin: 0 auto; 
    display: block; 
    width: 90%; 
    /* Change the max-width value on a media query breakpoint to make this example more "responsive" */ 
    max-width: 500px; 
    height: 90%; 
    padding: 30px; 
} 
.modal header { 
    height: 30px; 
    padding: 0; 
    color: #FFF; 
    background-color: #007; 
} 
.modal .body { 
    background-color: #FFF; 
    max-height: 100%; 
    overflow-y: auto; 
} 

http://jsfiddle.net/mariomc/EhR7r/