SCSS

HTML

<div class="wrapper container-fluid">

	<header>
		<h2>Header title goes here</h2>
	</header>

	<div class="header-navi">
		Header navi goes here
	</div>

	<div class="content">
		<div class="leftnavi">
			I am left navi
		</div>
		<div class="rightContent">
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quod labore distinctio nulla delectus, recusandae officiis at. Earum accusamus ea, sed dignissimos. Voluptatem, exercitationem! Dignissimos porro labore vel velit beatae.</div>
									
		</div>
	</div>

	<footer>Footer goes here</footer>
	
	
</div>

SCSS

.wrapper.container-fluid{
	padding:0;
	margin: 0;
	border:2px dashed red;
	display: flex;
	flex-direction:column;
	height: 100%;
	max-height:inherit;
  min-height: calc(100vh - 4px);

	header{
		border: 1px  solid blue;
	}

	div.content{
		border:1px solid gray;
		display: flex;
		flex-direction:row;
		height: 100%;
    flex-grow: 1;

		.leftnavi{
			border:1px solid gray;
			width: 20%;
			background:lightgray;
		}

		.rightContent{
			border: 1px solid red;
			max-width: 100%;
			width: 100%;
			background:lightgreen;
		}

	}

	footer{
		border: 1px solid green;
	}
}

body { margin: 0; }