Чистое CSS
решение (#content { min-height: 100%; }
) будет работать в большом количестве случаев, но не во всех них - особенно IE6 и IE7.
, К сожалению, необходимо будет обратиться к решению JavaScript для получения желаемого поведения. Это может быть сделано путем вычисления желаемой высоты для содержания <div>
и установки его как свойства CSS в функции:
function resizeContent() {
var contentDiv = document.getElementById('content');
var headerDiv = document.getElementById('header');
// This may need to be done differently on IE than FF, but you get the idea.
var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
contentDiv.style.height =
Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}
можно тогда установить эту функцию как обработчик для onLoad
и onResize
события:
<body onload="resizeContent()" onresize="resizeContent()">
. . .
</body>
См. формат :
$ tclsh
% for {set i 0} {$i < 5} {incr i} { puts [format "name%03d" $i] }
name000
name001
name002
name003
name004