JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">
        <p>Header</p>
    </div>
    <div id="content">
		<div id="teaser">
			<div id="title">Title
			</div>
			<div id="overlay">
				<div id="inhalt">Content2
				</div>
			</div>
		</div>        
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
#wrapper {
    position: relative; /* we use relative-absolute position combination below */
    height: 100%;
    margin: 0 auto;
    width: 800px;
    background-color: lightblue;
}
#header {
    background-color: orange;
    height: 100px;
}
#content {
    position: absolute;
    left: 0; /* this ...*/
    right: 0; /* and this make the div stretch all the way */
    top: 100px; /* same as header height */
    bottom: 50px; /* same as footer height */
    background-color: limegreen;

}
#footer {
    position: absolute;
    height: 50px;
    left: 0; /* this ...*/
    right: 0; /* and this make the div stretch all the way */
    bottom: 0; /* this makes the footer align with the bottom */
    background-color: silver;
	
	#title
	{
		position: relative;
		left: 10; /* this ...*/
		right: 0; /* and this make the div stretch all the way */
		top: 200px; /* same as header height */
		bottom: 50px; /* same as footer height */
		background-color: limegreen;
	}	
	#teaser
	{
		/*position: relative;*/
		height: 100%;
		margin: 0 auto;
		width: 800px;	
	}
	#title
	{
		position: absolute;
		height: 50px;
	}
	#overlay
	{
		position: absolute;
		top: 60px;
		height: 50px;
	}
    #inhalt
    {
        height: 2000px;
        width: 200px;
        background-color: red;
    }