Jonathan Bishop Jonathan Bishop - 1 month ago 13
CSS Question

Fixed ratio page auto scale

I have this table. I need to style it to always be in 16 by 9 ratio withn the top row taking up a fixed amount and the bottom row taking up the rest of the page. A single font size across the whole table and the whole thing centered with page when the screen isn't 16 by 9

<body class="clock">
<table class="clocktable">
<tr>
<td id="clock" class="time">
00:00:00</td>
<td id="timer" class="timing">
00:00:00</td>
</tr>
<tr>
<td colspan="2" id="eventnotes" class="notesevent">
Here</td>
</tr>
</table>
</body>


The solution need to work on desktop browsers as well as mobile.
I know i could do it with java script and resize every element based on the page width, However I feel that there should be a better way.

Answer

Have decided to use javascript and jquerry. The table is styled to 100% width and height of page. The bottoom row fills the fage because the top row has its height specified.

function resize() 
            {
            var textheight = (($(window).width()) / 10);
            clocktable.style.fontSize = (textheight) + 'px';
            clock.style.height = (textheight*1.2) + 'px';
            }
        $(document).ready(function() {resize()});
        $(window).resize(function() {resize()});

Here is my script.