Seeking input on good and bad practices in CSS/HTML/jQuery, I recently asked a question about determining when it is appropriate to use jQuery to set container dimensions. The responses I received were helpful (view them here).
Realizing that jQuery may not be the optimal solution, I am reaching out for additional insights on this issue.
The structure of my page involves PHP, with a common header across all pages and content dynamically loaded using PHP. Therefore, wrapping the header and div in a single container is not feasible:
include ("header.php");
include ("$lang/$section.php");
include ("footer.php");
The header has a fixed height (100px + 100px margin-bottom), followed by a div that should adjust its height based on screen size: below 768px, it should fill the remaining space, otherwise, have a maximum height of 420px with padding of 100px 0.
This div contains three floated columns that need to occupy the available space within the parent div.
Traditionally, I would utilize jQuery to calculate screen height subtracting header height, margins, and paddings. However, it seems this approach is not recommended for achieving this layout.
In summary, I am looking for a CSS-based method to ensure the div fills the space between the header and bottom of the viewport for screens smaller than 768px, capped at a max-height of 420px. While jQuery offers an easy solution, I am eager to explore a cleaner CSS alternative.
If anyone has suggestions or ideas, I would greatly appreciate your input.
For reference, here is a link to the fiddle containing the code.
Thank you in advance!