JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<header>
    <p>height depends on static content.</p>
    <p>This Part always stays visible.</p>
</header>

<div contenteditable='true'>
    height exactly fills up remaining height.
    this part (ONLY!) scrolls if content is longer!
    (this part will be contenteditable)
</div>

<footer>
    <p>height depends on static content.</p>
    <p>This Part always stays visible.</p>
</footer>

CSS

*{
    padding: 0px;
    margin: 0px;
}

body{
    width: 100%;
    height: 100%;
}

header, footer, div{
    display: block;
    width: 100%;
}

header, footer{
    background: yellow;
}

header{
    top: 0px;
}

footer{
    bottom: 0px;
}

div{
    height: 100%;
    display: flex;
    flex: <'flex-grow'>;    
}