make div fill entire page | topherpedersen.blog

Welcome to my really quick tutorial on how to make a div fill the entire page using CSS & React.js. A lot of things seem really simple in CSS, but in reality you end up having to add tons of little extra tweaks to your code to get CSS to render what you would expect. For example, to make a <div> fill the entire page you would expect setting height and width to 100% to do the trick but… it doesn’t! Or maybe setting the height to 100vh and width to 100vw should do the trick right? Nope!

Well here’s the answer you’re looking for, you need to set the <div>’s position to absolute, top to 0, bottom to 0, then set the height and width to 100%. And then for good measure, maybe set the margin and padding to 0 as well?

Anyway, without further ado, How to Make a Div Fill the Entire Page in CSS & React.js:

	export default function Home() {
	return(
	<div
	style={{
	position: 'absolute',
	height: '100%',
	width: '100%',
	top: 0,
	bottom: 0,
	margin: 0,
	padding: 0,
	backgroundColor: 'purple'
	}}
	>
	</div>
	);
	}

view raw fillVerticalAndHorizontal.js hosted with ❤ by GitHub