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;
}

但只有底部：-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

Answer 2

将position:relative添加到.page时可以使用。

请参阅http://jsfiddle.net/8EZv6/1/

Answer 3

您只需将position: relative添加到.page，就像这样：

http://jsfiddle.net/qX2Kb/

Answer 4

当您使用position: absolute时，您定位的元素仅针对指定了position的最近父级进行定位。如果您没有为任何父级指定position，则它将相对于正文定位。

如果您希望表格相对于包含.page元素的位置，那么您应该将position: relative添加到.page

的CSS中

.page {
     position: relative;
     ...
}

希望这有助于表明我的意思：http://jsfiddle.net/2nx8Z/4/

您可以在此处详细了解定位：http://developer.mozilla.org/en-US/docs/Web/CSS/position

使用css将表放在可打印页面的底部

4 个答案: