I'm working on revamping an intranet page that was built years ago, and I'm trying to figure out the most effective CSS to properly lay out a page with the following requirements:
- The page should occupy the full height and width of the viewport and should be responsive to resizing.
- There should be a status bar that should always be visible at the bottom and should only be as tall as its contents.
- If the user increases the font size, the status bar should properly adjust so the text isn't cut off.
- If the content is taller than than the available screen height, scrollbars should appear in the content area to allow it to scroll (again, keeping the status bar visible).
Here's a mockup of the expected result:
As far as browser requirements go, this will ONLY be seen by a very specific group of users that will access it via Internet Explorer 11. No Chrome, no Firefox, no Edge - nothing except IE 11.
I've been experimenting with the "100vh" heights and flex, and I think I'm getting close but I'm just having some trouble getting everything the way I want. My current attempt looks like this:
body {
height: 96vh;
min-height: 96vh;
width: 95vw;
min-width: 95vw;
display: flex;
flex-direction: column;
}
#content
{
padding: 20px;
max-height: 95vh;
overflow:auto;
flex: 1 0 0;
}
#statusbar
{
background-color: #000;
color: #fff;
padding: 20px;
} <div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer id="statusbar">Status bar</footer>I appreciate whatever help can be provided! Thanks in advance!