Div height issues

by Florian B

HTML

<div id='wrapper-for-background'>
	<nav id="top-banner-wrapper">Top banner</nav>
	<div id="lower-wrapper">
		<div id="left-menu" class="lateral-menu">Left menu</div>
		<div id="center-section">
			<div id="app-top-menu">Top menu</div>
			<div id="container">
				<div class="transitioner">
					<div class="template-wrapper" style="opacity: 1;transform: translateX(-10px) translateY(0px);">
						<div id="scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
							1st Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
						</div>
					</div>
					<div class="template-wrapper" style="opacity: 1;transform: translateX(300px) translateY(0px);">
						<div id="scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
							2nd Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
							Scrollable area<br/>
						</div>
					</div>
				</div>
			</div>
			<div id="optional-footer">Optional footer</div>
			<div id="app-bottom-menu">Bottom menu</div>
		</div>
		<div id="right-menu" class="lateral-menu">Right menu</div>
	</div>
</div>

CSS

#wrapper-for-background {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #ff0000;
	display: block;
}

#top-banner-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 75px;
	min-width: 500px;
	/* overflow: hidden; */
	background: #ffff00;
}

#lower-wrapper {
	width: 100%;
	margin: 0px auto;
	min-width: 600px;
	max-width: 800px;
	position: absolute;
	top: 75px;
	left: 0;
	right: 0;
	bottom: 0;
}

#left-menu {
	width: 150px;
	left: 0;
}

#right-menu {
	width: 150px;
	right: 0px;
}

.lateral-menu {
	height: 100%;
	position: absolute;
	background: #00ff00;
	overflow-x: hidden;
	overflow-y: auto;
}

#center-section {
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 150px;
	right: 150px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

#app-top-menu {
	flex: none;
	width: 100%;
	height: 75px;
	background: #00ffff;
}

#container {
	background: #ff00ff;
	flex: auto;
	padding: 0px;
}

#optional-footer {
	flex: none;
	width: 100%;
	background: #808080;
}

#app-bottom-menu {
	flex: none;
	width: 100%;
	height: 75px;
/*    bottom: 0px;*/
	background: #0000ff;
	position: relative;
}

.transitioner {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.transitioner > div {
/*    height: 100%;*/
	width: 100%;
	overflow: hidden;
	position: absolute;
/*    top: 0;
	left: 0;*/
}

.template-wrapper {
	background: rgba(255, 255, 255, 0.8);
	top: 75px;
}

#scroller {
	left: 0;
	width: 100%;
	margin-bottom: 10px;
	overflow: hidden;
}