Full height layout with editable text box
I've been pondering this riddle for years and I can't believe that such a simple layout is not solved with a simple html + css chunk. So, I'll hand it over to you for the weekend ;-)
Desired result
(mental model: notepad.exe ...)
+---------------------------------------------------+
| height depends on static content. |
| This Part always stays visible. |
+---------------------------------------------------+
| height exactly fills up remaining height. |
| this part (ONLY!) scrolls if content is longer! |
| (this part will be contenteditable) |
+---------------------------------------------------+
| height depends on static content. |
| This Part always stays visible. |
+---------------------------------------------------+
Requirements:
- no javascript (because this is my current unsatisfactory solution)
- pure CSS + HTML
- cross-browser compatible and decomposes gracefully (no flexbox!)
- Header and footer heights are unknown ( this won't work unfortunately).
How can i do this?
source to share
You may not like the answer, but the only way to know all of your criteria is to use a spreadsheet for the layout.
Html
<table class="layout">
<tr class="header">
<td>Header goes here
<tr>
<td>
<div class="container">
<div class="content">
Content goes here.
</div>
</div>
<tr class="footer">
<td>Footer goes here
</table>
CSS
The table takes up the entire viewport:
.layout {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
Since the table is 100% high, it will stretch all rows as needed to fit the height. This style does not allow header and footer rows to be stretched:
.header, .footer {
height: 0px;
}
This style is only needed for Firefox:
tr {
height: 100%;
}
In all browsers except IE, this style works for td
. I put it in div
, so it will work with IE:
.container {
position: relative;
height: 100%;
}
Now that we have a relative positioned container, we can apply absolute positioning with 100% height and overflowing its contents:
.content {
overflow: auto;
position: absolute;
height: 100%;
}
Tested on IE11, Chrome, Firefox, Opera and Safari.
Fiddle
source to share