làm thế nào về THIS?
nó hoạt động với konqueror (KHTML), chrome (webkit) và firefox (gecko). giống như bất cứ điều gì gần đây, nó có lẽ sẽ barf theo IE6.
<html><body style="margin: 0; padding: 0;">
<div style="position: absolute; background: #faa;
height: 100px; top: 0px; width: 100%;">header</div>
<div style="position: absolute; background: #afa;
top: 100px; bottom: 100px; left: 0; width: 100px;">left</div>
<div style="position: absolute; background: #afa;
top: 100px; bottom: 100px; right: 0; width: 100px;">right</div>
<div style="position: absolute; background: #faa;
height: 100px; bottom: 0px; width: 100%;">footer</div>
<div style="position: absolute; background: #aaf;
bottom:100px; left: 100px;top: 100px;right: 100px; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt tempor
velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia. Nulla ultrices aliquet sem,
vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus purus
pellentesque nec. Ut eu nibh ut arcu mattis luctus. Cras at interdum quam. Pellentesque
imperdiet mi vitae felis sollicitudin iaculis. Maecenas accumsan tortor neque, at posuere
felis. Quisque ultricies mi quis dolor pellentesque elementum. Maecenas quis nunc tortor.
Cras eu velit faucibus nulla volutpat mollis. Aliquam fermentum lobortis diam ut pharetra.
Duis mattis posuere fringilla. Morbi consectetur mauris vel libero pellentesque varius.
Aenean leo enim, placerat a feugiat nec, ultrices et nulla. Etiam tincidunt urna id justo
molestie faucibus. Cras neque enim, semper et sodales eu, volutpat nec urna. Vestibulum
interdum arcu et ante egestas ut lacinia dui semper. Cras ligula lacus, aliquet nec dapibus
ac, commodo vitae libero. In gravida venenatis sapien a convallis.</p>
<p>Nulla ac risus eu velit pulvinar pretium. Etiam porttitor viverra sollicitudin.
Donec lectus mi, posuere quis luctus facilisis, lacinia non ante. Sed sed mi neque. Etiam
neque risus, bibendum et tincidunt vel, pharetra nec risus. In hac habitasse platea
dictumst. Nam sollicitudin condimentum lorem, quis dignissim turpis sagittis nec.
Pellentesque diam nunc, rhoncus quis lobortis id, lacinia quis lorem. Maecenas tempor metus
nec velit facilisis in rhoncus lectus varius. Integer mollis, odio ut pharetra varius, elit
nulla pellentesque neque, a egestas est justo dapibus neque. Vivamus a mauris massa, sit
amet commodo orci. Aliquam nec iaculis sapien. Suspendisse ornare, tortor eget mattis
tempus, nulla ligula fermentum elit, vitae euismod odio metus ac risus. Etiam iaculis
dignissim consectetur. Nunc molestie lorem ac neque pulvinar vitae eleifend justo
facilisis.</p>
<p>Duis a sem turpis, et cursus arcu. Suspendisse potenti. Sed eu risus orci, eget
bibendum justo. Praesent dapibus porttitor mauris, ac sollicitudin eros pretium quis.
Curabitur mi eros, aliquam et ultrices et, adipiscing ut mauris. Nunc pretium malesuada nisi
laoreet consectetur. Phasellus mi arcu, rutrum in blandit in, consectetur non risus.
Vestibulum enim lacus, aliquam eu ultrices a, tempor ut turpis. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur rhoncus faucibus sapien, quis vulputate eros tempus
consequat. Vivamus id metus massa. Vivamus aliquet enim quis sem viverra eu molestie elit
cursus.</p>
<p>Mauris at lorem massa. Aliquam risus ligula, vestibulum et placerat condimentum,
pellentesque sit amet justo. Cras tempor sollicitudin ultrices. Aliquam sed elit sapien.
Praesent consectetur molestie vehicula. Pellentesque quis lectus et nunc accumsan feugiat.
Ut rhoncus aliquet libero sed rhoncus. Fusce egestas nunc eu elit vestibulum placerat. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Phasellus vitae nisi ante, id fermentum justo.</p>
<p>Donec iaculis magna nec elit fringilla imperdiet. Proin mauris sem, pellentesque sed
ultrices ac, luctus ac elit. Donec blandit, orci ac volutpat luctus, turpis sem malesuada
tellus, eget porta magna nisi vitae quam. In vitae scelerisque urna. Proin ante odio,
ultrices lobortis scelerisque at, dictum non justo. Pellentesque tincidunt congue leo
malesuada ullamcorper. Quisque dapibus, massa dignissim gravida blandit, augue felis
vehicula urna, et ullamcorper turpis orci sit amet nibh. Ut vitae consequat nibh.
Pellentesque turpis justo, ultrices ac porta in, pretium quis quam. Donec purus nisi,
dignissim vitae hendrerit vel, hendrerit ac sapien. Fusce facilisis purus a libero elementum
ultrices. Nunc in libero congue ipsum tempor suscipit. Pellentesque pharetra pretium
volutpat. Nam sapien arcu, viverra vitae euismod sit amet, mollis nec arcu. Phasellus at
elit metus, sit amet tempus turpis. Phasellus mattis justo ut est varius facilisis ut et
leo. Phasellus congue cursus est eget luctus. In eleifend diam at enim ultricies a lacinia
mauris molestie. Nunc porttitor bibendum vulputate. Pellentesque quis risus vel mi
pellentesque imperdiet vitae ac nunc.</p>
</div>
</body></html>
Bạn không thể thực hiện việc này theo cách mà không cần sử dụng bảng. Bàn có thể làm điều này một cách tầm thường. Bạn sẽ dành rất nhiều thời gian bashing đầu của bạn chống lại một bức tường. Bàn là một công cụ và nếu CSS "tinh khiết" không thể làm những gì bạn muốn (mà nó không thể trong trường hợp này), bạn cần phải vượt qua nó và sử dụng các công cụ có thể. – cletus
@cletus: Về "Bảng có thể làm điều này tầm thường" ... nó cũng có thể cho phép thanh cuộn một phần cho khu vực trung tâm? Tôi thực sự đã cố gắng để làm toàn bộ điều với các bảng, và nó gần như làm việc, ngoại trừ phần cuộn (chỉ chrome dường như tôn trọng 'overflow: auto' khi được sử dụng bên trong' td') –
Làm điều này tương đối đơn giản với CSS, trình duyệt chéo và bạn không cần bảng. Tôi sẽ thử và đặt một liên kết cùng với một mẫu đánh dấu nhưng tôi sẽ ra khỏi thị trấn vào tối thứ Hai trong một tuần vì vậy tôi không biết liệu tôi có thể làm điều đó vào lúc đó hay không. – Rob