In my code, I have a div that contains both horizontal and vertical scrollers. Whenever I try to print the content inside this div using the window.print() method, it only prints the visible portion of the div. Here is the code snippet that I have attempted:
<style>
@media print {
body * {
visibility: hidden;
}
.printableDiv * {
visibility: visible;
overflow: visible;// overflow: scroll; or overflow: auto;
}
When I use the overflow attribute, the content does not get printed correctly - only the top portion of the div stretches and gets printed.
<style>
@media print {
body * {
display: none;
}
.printableDiv * {
display: block;
overflow: visible;// overflow: scroll; or overflow: auto;
}
If I do this, nothing gets printed at all.
<style>
@media print {
body * {
visibility: hidden;
}
.printableDiv * {
visibility: visible;
}
This will print the visible portion of the div, but even after hiding the rest of the elements, they do not collapse to cover the whole page. I tried repositioning them with the following code, but it also did not work:
<style>
@media print {
body * {
visibility: hidden;
}
.printableDiv * {
visibility: visible;
}
.printableDiv * {
position: absolute;
left: 0;
top: 0;
Please provide a solution on how to print the content that is behind the scroll bars. I would also like to mention that this div is dynamically populated during runtime and does not contain static values.