2013-12-07 4 views
4

У меня есть следующая функция, которая отлично работает.Stretch div до A4 размер

<script type="text/javascript"> 
function printDiv(printpage) 
{ 
var headstr = "<html><head><title></title></head><body>"; 
var newstr = document.all.item(printpage).innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML = headstr+newstr; 
window.print(); 
document.body.innerHTML = oldstr; 
return false; 
} 
</script> 

Однако мой div составляет примерно половину от размера бумаги. Есть ли способ сделать мой div растягиваться до полного размера бумаги при вызове функции?

+0

вы можете попробовать установить ' высота: 100% ' – Grundy

+0

Дубликат [Stretch div on print function] (http://stackoverflow.com/questions/20444860/stretch-div-upon-print-function) –

+0

Возможно le duplicate of [возможно ли распечатать содержимое div на A4 с использованием всей ширины?] (http://stackoverflow.com/questions/7664093/is-it-possible-to-print-the-contents- из-a-div-on-an-a4-using-its-whole-width) – cubrr

ответ

16

Вы можете установить размер Div с помощью CSS, чтобы уместить его в бумагу размера A4 CSS:

body { 
    margin: 0; 
    padding: 0; 
    background-color: #FAFAFA; 
    font: 12pt "Tahoma"; 
} 
* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 
.page { 
    width: 21cm; 
    min-height: 29.7cm; 
    padding: 2cm; 
    margin: 1cm auto; 
    border: 1px #D3D3D3 solid; 
    border-radius: 5px; 
    background: white; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
} 
.subpage { 
    padding: 1cm; 
    border: 5px red solid; 
    height: 237mm; 
    outline: 2cm #FFEAEA solid; 
} 

@page { 
    size: A4; 
    margin: 0; 
} 
@media print { 
    .page { 
     margin: 0; 
     border: initial; 
     border-radius: initial; 
     width: initial; 
     min-height: initial; 
     box-shadow: initial; 
     background: initial; 
     page-break-after: always; 
    } 
} 

HTML:

<div class="book"> 
<div class="page"> 
    <div class="subpage">Page 1/2</div>  
</div> 
<div class="page"> 
    <div class="subpage">Page 2/2</div>  
</div> 
</div> 

DEMO: http://jsfiddle.net/2wk6Q/3/

+1

Спасибо вам, что вам нравится! – Rubberduck1337106092

Смежные вопросы