第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

我可以使用什么 css 替代方案來(lái)替代不支持的 margin-top:auto 使用 mpdf

我可以使用什么 css 替代方案來(lái)替代不支持的 margin-top:auto 使用 mpdf

PHP
qq_花開(kāi)花謝_0 2022-05-27 10:20:28
我正在嘗試使用 mpdf 從我的原始 wyswyg生成 1:1 a4 頁(yè)面到 pdf。所以使用這個(gè)CSS:#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;  margin-top: auto;  height: 100px;  page-break-after:right;}.brasao {  height: 60px;  width: 60px;}#template {  display: none;}應(yīng)用于此 HTML + JS:https ://jsitor.com/FWvNJa7XN 如您所見(jiàn),在 div 頁(yè)腳上使用margin-top:auto,至少在網(wǎng)絡(luò)瀏覽器上,我能夠?qū)㈨?yè)腳粘貼在每個(gè)頁(yè)面的底部.但是當(dāng)我嘗試使用 mpdf 編寫時(shí):<?phpuse Mpdf\Mpdf;use Mpdf\Output\Destination;include 'vendor' . DIRECTORY_SEPARATOR . 'autoload.php';$mpdf = new Mpdf(); //via JS as I able to send each page outerHTML separated on hidden values$pages = $_REQUEST['pages'];$mpdf = new \Mpdf\Mpdf([    'mode' => 'utf-8',    'format' => 'A4',    'margin_left' => 0,    'margin_right' => 0,    'margin_top' => 0,    'margin_bottom' => 0,    'margin_header' => 0,    'margin_footer' => 0,    'dpi' => 72]);$stylesheet = file_get_contents('redator.css');$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);foreach ($pages as $page) {    $mpdf->WriteHTML($page);}$mpdf->Output();在 Firefox 上呈現(xiàn)的是這樣的(包括編輯器 div): https ://i.imgur.com/UJldBr9.png但是,使用 mpdf,結(jié)果不是預(yù)期的: https ://www.docdroid.net/vP4QALq/mpdf.pdf那么,如何嘗試在 mpdf 上進(jìn)行 1:1 渲染呢?
查看完整描述

3 回答

?
慕婉清6462132

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)容類中提供固定高度


查看完整回答
反對(duì) 回復(fù) 2022-05-27
?
MMTTMM

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;

}


查看完整回答
反對(duì) 回復(fù) 2022-05-27
?
阿晨1998

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

 }


查看完整回答
反對(duì) 回復(fù) 2022-05-27
  • 3 回答
  • 0 關(guān)注
  • 313 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)