html - 使用 css 在可打印页面的底部放置一个表格

Question

我有一张 A4 纸用于打印:

.page 
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

在此页面中，我试图在底部放置一个表格:

   <table id="t_obs">
        <tr>
            <td>TEXT</td>
        </tr>
    </table>

使用CSS:

#t_obs
{
   position: absolute;
   bottom:0px;
}

但只有 bottom: -100px 才会到底部，为什么？

谢谢。

Answer 1

使用position:relative 到.page

  .page 
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position:relative;
}

DEMO