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