CSS：仅将滚动条添加到页面的“内容”部分

I am working on a web app which I want to layout as shown below. Since the layout should be responsive the height of the header or footer are unknown. What I want to achieve is to spread the web page vertically across the page. The footer should be at the very bottom and the content part should be stretched to fit the gap between header and footer, with only this part of the page being "scrollable". I've been googling four hours since this seems like a pretty straightforward thing to do, but I have not yet found a satisfying answer. My code therefore is very limited.I am working on a web app which I want to layou