I am working on a flexbox layout with three horizontal columns that I want to occupy the full size of the window without any scrollbars.
In the middle column, there is a div that will display an A4 page. The dimensions should always remain proportionate, adjusting dynamically when the browser window is resized.
The content within the div also needs to be scaled down to match the parent container size. This includes text and images that need to resize accordingly.
My initial attempt was to use the following CSS:
A4-Portrait {width: auto; height: auto; max-width: 595.296px; max-height: 841.896px;}
However, this approach did not scale the div proportionally or resize its contents, only adjusting the width and height to fit the space.
To demonstrate the issue, I have provided a simple code snippet:
body
{
padding: 0em;
margin: 0em;
height: 100vh;
display: flex;
flex-direction: column;
font-family: arial;
box-sizing: border-box;
}
header, main, footer
{
padding: 1em;
flex: 1;
}
header, footer
{
background-color: #999;
}
main
{
flex: 2;
background-color: grey;
}
page
{
padding: 1em;
background: white;
display: block;
}
.A4-Portrait
{
width: 595.296px;
height: 841.896px;
}
<header>[header]</header>
<main>
<page id="pageSize" class="A4-Portrait">
[page]
</page>
</main>
<footer>[footer]</footer>
UPDATE: Since I couldn't find a pure CSS solution, I turned to 'Fit.js' for help.
By including the Fit.js file and adding the following code, I was able to implement it successfully. The A4 page size in pixels remained unchanged, and the JavaScript calculated the maximum dimensions based on the parent DIV. It also monitored user browser resizing.
// get element references
var foo = document.querySelector('main');
var bar = document.querySelector('#pageSize');
// fit bar into foo
// the third options argument is optional, see the README for defaults
// https://github.com/soulwire/fit.js
var watching = fit(bar, foo, {
// Alignment
hAlign: fit.CENTER, // or fit.LEFT, fit.RIGHT
vAlign: fit.CENTER, // or fit.TOP, fit.BOTTOM
// Fit within the area or fill it all (true)
cover: false,
// Fit again automatically on window resize
watch: true,
// Apply computed transformations (true) or just
// return the transformation definition (false)
apply: true
});