tags:

views:

27

answers:

1
Q: 

I want to make the table fixed in between the header and footer.

I have created a HTML page with three section. One header at the top, two a table at the middle and a footer at the bottom. All the three is defined in three divs. The Header is fixed at the top using the css property ( top:0px; position:fixed;), likewise the footer is fixed at the bottom using css property (bottom:0px position:fixed;).

The table have to be fixed in between the header and footer in all conditions, ie when the browser is zoomed in or zoomed out the table have to be fixed between the header and footer.

To be more specific the top of the table have to stick to the bottom of the header and the bottom of the table have to stick to the top of the footer, I think the table have to exhibit some fluid property.Is there any thing like that.

Can anyone help?

A: 

Try the following:

<html>
<body style="height:100%;width100%;padding:0;margin:0">

<div style="position:fixed:top:0;width:100%;height:10%;background-color:red;">
    Header
</div>
<div style="position:fixed:top:10%;width:100%;height:80%;background-color:green;overflow:auto">
    <table>
      <tr><td>Table / Middle</td></tr>
   </table>
</div>
<div style="position:fixed:top:90%;width:100%;height:10%;background-color:blue;">
    Footer
</div>

</body>
</html>
cesarnicola  2010-07-27 18:23:53

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?