I am currently using Bootstrap and Angular to develop a single-screen webpage tailored for small screens such as the Adafruit 2.2" or 2.8" screen for the Raspberry Pi, or mobile phone displays. I aim to make all content (specifically about 3-4 rows of a table) expand perfectly to fit the screen, without exceeding 100vh or 100vw and without any scrollbars or cutoff text.
Despite my efforts, I am struggling to achieve this. Here is a JSFiddle showcasing what I am attempting to accomplish, albeit without the inclusion of Bootstrap/Angular elements:
CSS:
#statusController {
background: #333;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
}
td {
font-size: 100vh;
}
body,
html {
padding: 0;
margin: 0;
color: white;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
}
HTML:
<div id="statusController">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
I have also experimented with jQuery and various Angular plugins like BigText, fitText, textFit, among others, yet faced the same issue - the text expands beyond the page's boundaries, requiring scrolling to view it entirely.
Any suggestions or ideas would be greatly appreciated.
UPDATE: After reviewing similar answers, my question remains distinct as it pertains more to the need for scrolling rather than expanding text. I may need to modify the provided code sample to address the issue of text scaling extending past the bottom when there is sufficient content, which is something I wish to avoid.