HTML table caption and total height of the table

I have a table in a div element. The div is used as a placeholder only (it has "fixed" position and hard defined sizes/left/top). The table has 100% width and height (of the div).

When I use internal "caption" tag within the table it seems like it's not included in the total height of the table. The table is out of the div from the bottom.

Without caption everything is OK (the table has the same position/size as the div):

--------<div>--------
| =<table>=========开发者_开发知识库 | 
| |                ||
| |                ||
| |                ||
| |================|| 
---------------------

With caption it's broken (the table is outside the div):

--------<div>--------
|                   |
|  Caption (large)  |
|                   |
| =<table>========= | 
| |                ||
  |                |
  |                |
  |================|

What I want is to make table have the div height minus caption's height.

Try fixing the captions width and height and setting margin and padding to 0. Then add up the table height + caption height to make the div height.

Add overflow: hidden; to the outer <div> - as long as your div doesn't have a pre-defined height, it will cause all internal elements to be included in any background-color/image size computing for the <div>.