3 回答

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊
解決方案1: 您可以添加
.content{
...
flex:auto;
...
}
并根據(jù)需要設(shè)置頁(yè)眉和頁(yè)腳的高度。
解決方案2:讓頁(yè)眉和頁(yè)腳的高度各為100px,高度
.footer {
...
position:absolute;
bottom:0;
height:100px;
...
}
.header{
height:100px;
}
.content{
height:calc(100% - 200px);
}
.page{
position:relative;
}
解決方案 3只需根據(jù)需要在頁(yè)眉、頁(yè)腳和內(nèi)容類中提供固定高度

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊
在普通 CSS中,您將設(shè)置頁(yè)腳position: absolute;并將其放在底部。為了不隱藏東西,添加一個(gè)margin-bottom與頁(yè)腳高度相同的頁(yè)面。
.page {
position: relative;
margin-bottom: 100px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
heigth: 100px;
}

TA貢獻(xiàn)2037條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以像這樣設(shè)置絕對(duì)值:
#editor {
background-color: gray;
border: 1px black;
padding: 1em 2em;
}
.page {
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
/*padding: 10em 2em;*/
width: 595px;
height: 841px;
display: flex;
flex-direction: column;
}
.content {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
padding-left: 2cm;
padding-bottom: 2cm;
padding-top: 2cm;
outline-color: white;
}
.header {
background-color: red;
text-align: center;
}
.footer {
background-color: darkgray;
position:absolute;
width:595px;
top:817px;
height: 100px;
page-break-after:right;
}
.brasao {
height: 60px;
width: 60px;
}
#template {
display: none;
}
這在瀏覽器中呈現(xiàn)正常。
您還可以以編程方式呈現(xiàn)它們。請(qǐng)參閱此文檔:https ://mpdf.:github.io/headers-footers/method-4.html
有趣的可能是使用文檔中描述的@page 屬性進(jìn)行嘗試: https ://mpdf.github.io/css-stylesheets/supported-css.html
@頁(yè)
設(shè)置 'page-box' 的大小,通常與文檔中的固定大小表一起使用,如 CSS2 @paged 媒體規(guī)范中所示。
我想它會(huì)是這樣的:
@page {
//your CSS
}
- 3 回答
- 0 關(guān)注
- 313 瀏覽
添加回答
舉報(bào)