sandipchitale/viewport.html

## viewport.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        html,
        body {
            width: 100vw;
            height: 100vh;
        }

        body {
            margin: 0px;
        }

        .header {
            height: 55px;
            padding: 10px;
            background: #333;
            color: #fff;
        }

        .viewport {
            width: 100vw;
            height: calc(100vh - 110px);
            overflow-y: auto;
            padding: 10px;
        }

        .footer {
            width: 100vw;
            height: 55px;
            margin: auto;
            padding: 10px;
            position: absolute;
            bottom: 0;
            background: #333;
            color: #fff
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>InfoArchive</h1>
    </div>
    <div class="viewport">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus maxime tenetur, natus unde aliquam error enim voluptatibus!
        Ipsam unde recusandae molestias accusantium iste, voluptas non. Quasi iure odio unde tenetur repudiandae omnis aliquam
        minus harum quis animi, molestiae deleniti in doloremque pariatur eos! Accusantium officia autem cum sapiente. Quisquam
        vero, mollitia beatae nulla minima ullam rerum amet cum aliquid architecto pariatur animi temporibus! Rem corrupti
        dolore, inventore ea sed, quasi sunt consequuntur beatae accusamus dicta voluptatem possimus eius error nisi soluta
        voluptate deserunt quod repellat eaque, voluptates nihil officia fuga? Nostrum architecto saepe eius. Reiciendis
        voluptas in perferendis laudantium praesentium tenetur necessitatibus, similique architecto id iste? Consectetur
        voluptates facilis quibusdam molestias ducimus autem accusantium omnis corrupti! Ea vero culpa, sit ab ipsum voluptatum
        repellat facere cum exercitationem accusantium odio soluta nulla reiciendis, libero, cupiditate tempora maiores?
        Aut reiciendis sapiente veniam iure eos quod accusamus illum natus.
    </div>
    <div class="footer">
        <h4>InfoArchive &copy; 2018</h4>
    </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Layout</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	html {
	box-sizing: border-box;
	}

	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}

	html,
	body {
	width: 100vw;
	height: 100vh;
	}

	body {
	margin: 0px;
	}

	.header {
	height: 55px;
	padding: 10px;
	background: #333;
	color: #fff;
	}

	.viewport {
	width: 100vw;
	height: calc(100vh - 110px);
	overflow-y: auto;
	padding: 10px;
	}

	.footer {
	width: 100vw;
	height: 55px;
	margin: auto;
	padding: 10px;
	position: absolute;
	bottom: 0;
	background: #333;
	color: #fff
	}
	</style>
	</head>

	<body>
	<div class="header">
	<h1>InfoArchive</h1>
	</div>
	<div class="viewport">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus maxime tenetur, natus unde aliquam error enim voluptatibus!
	Ipsam unde recusandae molestias accusantium iste, voluptas non. Quasi iure odio unde tenetur repudiandae omnis aliquam
	minus harum quis animi, molestiae deleniti in doloremque pariatur eos! Accusantium officia autem cum sapiente. Quisquam
	vero, mollitia beatae nulla minima ullam rerum amet cum aliquid architecto pariatur animi temporibus! Rem corrupti
	dolore, inventore ea sed, quasi sunt consequuntur beatae accusamus dicta voluptatem possimus eius error nisi soluta
	voluptate deserunt quod repellat eaque, voluptates nihil officia fuga? Nostrum architecto saepe eius. Reiciendis
	voluptas in perferendis laudantium praesentium tenetur necessitatibus, similique architecto id iste? Consectetur
	voluptates facilis quibusdam molestias ducimus autem accusantium omnis corrupti! Ea vero culpa, sit ab ipsum voluptatum
	repellat facere cum exercitationem accusantium odio soluta nulla reiciendis, libero, cupiditate tempora maiores?
	Aut reiciendis sapiente veniam iure eos quod accusamus illum natus.
	</div>
	<div class="footer">
	<h4>InfoArchive © 2018</h4>
	</div>
	</body>

	</html>