HTML并排div不能完全填充宽度

Question

我有以下快速的html测试，它是我尝试做的事情的简化版本。 我不确定的是为什么“详细信息”区域（带有红色边框的区域未在右侧与其他所有区域对齐。我在做什么错了？

CSS：

.landscapepage {
    position:relative;
    width: 280mm;
    height: 190mm;
    page-break-after: always;
}

div.header {
    position:relative;
    min-height: 30mm;
    width: 100%;
    border-style:solid;
    border-width: medium;
    border-color:Gray;
    text-align:center;
}

div.footer {
    position:absolute;
    min-height:30mm;
    border-style:solid;
    border-width:medium;
    border-color:Gray;
    text-align:center;
    width: 100%;
    bottom: 0pt;
}

div.summary {
    position:relative;
    width: 80mm;
    min-height: 20mm;
    display:table-cell;
    border-style:solid;
    border-width:medium;
    border-color:Navy;
}

div.details {
    position:relative;
    display:table-cell;
    border-style:solid;
    border-width:medium;
    border-color:Red;
    min-height:20mm;
    width:100%;
}

HTML：

<div class="landscapepage">
    <div class="header">
        Header
    </div>
    <div class="summary">
        Summary
    </div>
    <div class="details">
        Details
    </div>
    <div class="footer">
        Footer
    </div>
</div>

请参阅此jsFiddle 。

Answer 1

这都是关于边框的宽度。

当您不设置边框但设置背景色时，您会得到类似http://jsfiddle.net/cRZbw/1/的信息 ，其中“详细信息”与“页眉”正确对齐。

div.header {
    position:relative;
    min-height: 30mm;
    width: 100%;
    background:gray;
    text-align:center;    
    border:1px solid red;
}

div.footer {
    position:absolute;
    min-height:30mm;
    background:gray;
    text-align:center;
    width: 100%;
    bottom: 0pt;
}

div.summary {
    position:relative;
    width: 80mm;
    min-height: 20mm;
    display:table-cell;
    background:navy;
}

div.details {
    position:relative;
    display:table-cell;
    background:red;
    min-height:20mm;
    width:100%;
}

Answer 2

可能是您想这样做： http : //jsfiddle.net/cRZbw/2/将 div.footer的位置更改为相对。

这是代码：

div.footer {
    position:relative;
    min-height:30mm;
    border-style:solid;
    border-width:medium;
    border-color:Gray;
    text-align:center;
    width: 100%;
    bottom: 0pt;
}