0

私がやろうとしているものの簡略化されたバージョンである次の簡単な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を参照してください。

4

2 に答える 2

0

境界線の幅がすべてです。

境界線を設定せずに背景色を設定すると、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%;
}
于 2013-02-15T12:39:33.620 に答える
0

これをやりたいかもしれません: 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;
}
于 2013-02-15T12:39:44.837 に答える