Я хочу сделать фиксированную высоту страницы без прокрутки, заголовок фиксирован сверху и заполнить центр до конца страницы. При переполнении контента в центральной области будет свой собственный экран прокрутки.Как сделать фиксированный шаблон страницы?
Я установил высоту 100% для центрального div, но эта высота ≠ высота свободного пространства между верхним и нижним блоками.
Что я могу сделать? Большое спасибо!
Я сделал скрипт js, который я создал с точками, которые я понял из вашей проблемы. Я использую jquery $(window).height() для получения высоты видового экрана браузера. Вычитая высоту верхнего и нижнего колонтитула (50px + 50px = 100px) с высоты видового экрана браузера, я получу высоту дополнительного пространства. Эта высота будет равна высоте содержимого.
проверка скрипка http://jsfiddle.net/bnx4uuse/1/
Добавить оболочку DIV вокруг центра дел. Установите его на весь экран и блокнот:
height: 100%;
width: 100%;
padding-top: 150px; /* size of your header */
padding-bottom: 100px; /* size of your footer */
На вашем центре DIV установить переполнение:
overflow: auto
overflow свойства скрывает дополнительный контент и добавляет полосы прокрутки к вашим делам.
Вы заголовок будет:
height: 150px; /* your desired size */
position: fixed; /* or absolute */
top: 0px;
Вашей сноска будет:
height: 100px; /* your desired size */
position: fixed; /* or absolute */
bottom: 0px;
Тогда у вас есть "полный экран" приложение (полное окно в этом случае)
Спасибо, но я могу использовать фиксированные размеры - страница должна быть полным размером экрана – hcuser
хмм ... тогда я предлагаю обертку вокруг вашего центра DIV в ширине 100% и высоту с отступами размер вашего верхнего и нижнего колонтитула. Верхний и нижний колонтитулы с абсолютным или фиксированным положением, сверху 0 и нижним 0 соответственно. Ваш центр div использует переполнение: авто. Затем у вас полноэкранное приложение. – SparK
html,body {height:100%; }
* { padding: 0; margin: 0; }
body { border:1px solid blue; }
#head {background-color:#FC6; height:50px;position:fixed;top:0px;width:100%;}
#center {background-color:#3CC; height:100%;margin:49px 0px; }
#foot {background-color:#9C0; height:50px;position:fixed;bottom:0px;width:100%;}
сценарий: http://jsfiddle.net/9xrz9mbf/4/
Спасибо, Дино! Это работает! – hcuser