Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> html, body { height: 100%; margin: 0; } .box { display: flex; flex-flow: column; height: 100%; } .box .row { border: 1px dotted #0313fc; } .box .row.header { flex: 0 1 auto; } .box .row.content { flex: 1 1 auto; } .box .row.footer { flex: 0 1 40px; } </style> </head> <body> <div class="box"> <div class="row header"> <p>header (sized to content)</p> </div> <div class="row content"> <p>content (fills remaining space)</p> </div> <div class="row footer"> <p>footer (fixed height)</p> </div> </div> </body> </html>