One distinct challenge not addressed in the similar inquiries below relates to a FORM component with both a variable segment and a fixed footer for submit buttons.
The objective is to present:
- A header (a table set to 100% width including a logo and text): size should be minimal while displaying all content
- A FORM structure (comprising two parts):
- Fields housed within a div that expands to fill available space and scrolls if needed. (minimum size: one line of text)
- Submit/Reset buttons placed in a table, always visible and never resized. Ideally, they remain at the bottom of the browser window except in extreme cases of window resizing.
It is essential that no content extend beyond the bottom of the browser window unless under very unusual circumstances.
- Setting a fixed height is not an option, except when technically necessary (such as using 100% on a parent element like body or column). The heights of the header and footer must auto-adjust to utilize minimum space while showing all content. Should the user decrease the window width causing header/footer text to wrap onto additional lines, the height should adjust accordingly. Thus, percentages or viewport height are not suitable options due to their lack of adaptability to factors like zoom level or browser resizing.
I attempted the following layout:
<div id="column">
<div id="header>
<table><tbody>
<tr><td>LOGO</td><td>Some intro text on a few lines</td></tr>
</tbody></table>
<!-- optional error line of arbitrary length in case of failed form submission -->
</div>
<form>
<div id="variable_scrollable_content">
<!-- multiple field sets hosting various inputs (text, select, etc.) -->
</div>
<div id="footer">
<table><tbody>
<tr><td>Save button</td><td>Reset button</td></tr>
</tbody></table>
<!-- A few lines of text -->
</div>
</form>
</div>
After reviewing similar questions (see list below), I could not find a solution accommodating the need for a scrollable section within a dynamic-sized FORM combined with a fixed footer.
I also explored https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox without success.
Attempts with flex classes applied to the header, variable_scrollable_content, and footer were unsuccessful. Including the entire form object in a flex class proved unproductive as well.
As the FORM's submit/reset buttons cannot be separated from the managed fields, a resolution remains elusive.
- Header ought to remain anchored at the top of the browser window
- Footer (housing form control buttons) should stay fixed at the bottom of the browser window ideally or position themselves after the last field if there is adequate space
- Fields should reside within a container whose size adjusts dynamically to occupy space between the header and footer, capable of scrolling if content exceeds capacity
If the abridged code above proves insufficient, refer to the "real" source code here: https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/edit_config.php The complete CSS stylesheet can be accessed here: https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/css/screen.css
Similar Inquiries
In evaluating related queries listed below, it appears my specific issue centers around the interplay of the FORM element with the overall layout design:
- Scrolling content between fixed header & footer with variable height
- Content height expand between fixed header and fixed footer
- Make a div fill the height of the remaining screen space
Original question found here: Variable Height Div Between Header and Footer