JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sapiente explicabo, eum nostrum reprehenderit distinctio deleniti odit dignissimos. Laborum esse doloribus, ipsum doloremque aliquam eos distinctio molestiae, dolorum quaerat, possimus omnis dolorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sapiente explicabo, eum nostrum reprehenderit distinctio deleniti odit dignissimos. Laborum esse doloribus, ipsum doloremque aliquam eos distinctio molestiae, dolorum quaerat, possimus omnis dolorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sapiente explicabo, eum nostrum reprehenderit distinctio deleniti odit dignissimos. Laborum esse doloribus, ipsum doloremque aliquam eos distinctio molestiae, dolorum quaerat, possimus omnis dolorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sapiente explicabo, eum nostrum reprehenderit distinctio deleniti odit dignissimos. Laborum esse doloribus, ipsum doloremque aliquam eos distinctio molestiae, dolorum quaerat, possimus omnis dolorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sapiente explicabo, eum nostrum reprehenderit distinctio deleniti odit dignissimos. Laborum esse doloribus, ipsum doloremque aliquam eos distinctio molestiae, dolorum quaerat, possimus omnis dolorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sapiente explicabo, eum nostrum reprehenderit distinctio deleniti odit dignissimos. Laborum esse doloribus, ipsum doloremque aliquam eos distinctio molestiae, dolorum quaerat, possimus omnis dolorem.</p>
<footer></footer>

CSS

html {
	height: 100%;
}
body {
	padding-top: 1px; /* Убирает верхний margin от первого параграфа, который вызывает прокрутку. То есть мы отменяет схлопывание, при котором "проскакивает" отступ. */
	margin-top: -1px; /* Убирает заданный padding-top 1px */
	box-sizing: border-box; /* Чтобы height 100% = padding + height content */
	height: 100%; /* 100% высоты от 100% высоты родителя то есть html */
	background-color: lightgreen;
	padding-bottom: 100px !important;
	position: relative;
}
html, body {
	margin: 0;
}
p {
	
}
footer {
	position: absolute;
	width: 100%;
	height: 100px;
	background-color: lightblue;
	bottom: 0;
}