Привет, Choesang, красный квадрат, вот еще один способ сделать это, не убирая ничего с экрана.
Сначала найдите высоту области просмотра, с которой вам нужно работать, мы назовем это viewportHeight. Если содержимое вашего верхнего и нижнего колонтитула уже задано, оно будет иметь высоту. Подсчитайте их высоту и сложите их вместе, мы назовем это «usedHeight». Высота, которую вы оставили, чтобы поместить содержимое, является следующим: Остаток: высота = видовая область - используемая высота;
Если вы установите для свойства css в контейнере содержимого значение height = stillHeight и overflow-y = auto, ваш контент всегда будет занимать как минимум минимальную высоту контента, а если его будет слишком много, будет выполняться прокрутка. бар, чтобы появиться.
Мы собираемся использовать библиотеку Prototype, чтобы помочь нам, но мы могли бы также легко использовать jQuery или даже написать код для вычисления высот сами.
Обратите внимание, что в теле я устанавливаю высоту 100%, а также отступы 0 и поля 0. Большинство браузеров размещают отступ вокруг тела в 10px, и это приведет к тому, что нижний колонтитул будет отображаться на экране. экран в процессе я показываю.
<html>
<head>
<script type='text/javascript' src='prototype.js'></script>
</head>
<body style='height: 100%; padding: 0; margin: 0;'>
<div>
<div id='header'>header text</div>
<div id='content'>content text</div>
<div id='footer'>footer text</div>
</div>
<script type='text/javascript'>
// Here we will set the text of the content, calculate its height,
// and set the max height. In production I would use less lines,
// for here writing each step out for clarity.
var viewportHeight = document.viewport.getHeight();
var headerHeight = $('header').getHeight();
var footerHeight = $('footer').getHeight();
var usedHeight = headerHeight + footerHeight;
var remainingHeight = viewportHeight - usedHeight;
// we have our remaining height, now set the style.
$('content').setStyle({
'height': remainingHeight,
'overflow-y': 'auto'
});
</script>
</body>
</html>