Problem z układem strony

0

Chcę osiągnąć taki układ

  • nagłówek
  • tabela
  • przyciski (dodaj, edytuj, usuń, drukuj itp )
  • stopka

Tabelka powinna wypełniać cały środek, od lewej do prawej i z góry do dołu, przyciski powinny być zawsze u dołu. Tabelka i jej treść będą się zmieniać w zależności od wyborów użytkownika. Może być mała ale może być też bardzo duża i wtedy powinny się pojawić scrollbary a przyciski nadal powinny być u dołu okna a nie opadać poza widoczny obszar.

Jak tego dokonać?

1

będzie prawie tak
problem jest z ustaleniem wysokości div w którym jest tabelka w zależności od rozdzielczości (czy wielkości okna), nie da się tego w samym css zrobić, ale można posiłkując się js

<html>
<head>
<title></title>
<style type="text/css">
body{margin:0;padding:0;height:100%;}
#container {height:100%}
div {widht:100%;border:solid 0px gray;}
</style>
</head>
<body>
<div id="container">
<div id="header" style="height:160px">header</div>
<div style="height:600px;overflow:scroll;">
	<table style="width:100%;" border="1">
		<tr><th>1</th><th>2</th><th>3</th></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
		<tr><td>1</td><td>2</td><td>3</td></tr>
	</table>
</div>
<div style="height:60px">buttons</div>
<div style="height:100px">footer</div>
</div>
</body>
</html>
0

dzięki massther, no właśnie o tą wysokość tabelki mi chodzi, niestety u mnie cienko z JS

1 użytkowników online, w tym zalogowanych: 0, gości: 1