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