CSS method to fill the remaining space of the parent container with the height of the child element Div

Time:2021-10-17

1. Use floating mode

design sketch:

The code is as follows: (note that the height of. Content is 500px, that is, the height of the parent element, but the floating element is above. Content and covers. Content. Change the. NAV background style to background color: RGBA (0,0,0,0.1); the effect can be observed)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		< title > height fill parent container < / Title >
	</head>
	<style>
		.parent {
			height: 500px;
			width: 300px;
			border: 1px solid red;/***/
			padding: 2px 2px;/***/
		}
		.nav {
			height: 100px;
			width: 100%;/* The width must be covered to prevent floating*/
			float: left;/* Must*/
			background-color: red;
		}
		.content {
			height:100%;/* Must*/
			background-color: green;
		}
	</style>
	<body>
		<div class="parent">
			<div class="nav">
				Fixed height
			</div>
			<div class="content">
				Adaptive parent container to fill the remaining space 
			</div>
		</div>
	</body>
</html>

2. Use positioning

The code is as follows: (this method is recommended without the disadvantages of the above method)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		< title > height fill parent container < / Title >
	</head>
	<style>
		.parent {
			position: relative;
			height: 500px;
			width: 300px;
			border: 1px solid red;/***/
			padding: 2px 2px;/***/
		}
		.nav {
			height: 100px;
			width: 100%;
			background-color: red;
		}
		.content {
			position:absolute;
			top: 100px;
			bottom: 0px;
			background-color: green;
			width: 100%;
		}
	</style>
	<body>
		<div class="parent">
			<div class="nav">
				Fixed height
			</div>
			<div class="content">
				Adaptive parent container to fill the remaining space 
			</div>
		</div>
	</body>
</html>

This is the end of this article about how CSS makes the height of the child element div fill the remaining space of the parent container. For more information about how CSS child element div fills the remaining space, please search the previous articles of developpaer or continue to browse the relevant articles below. I hope you can support developpaer in the future!

Recommended Today

Browser rearrangement (reflow) redrawing and optimization scheme

1、 What is rearrangement and redrawing To clarify reflow and repaint, you must first understand the arrangement and rendering. When the browser renders a page, after obtaining HTML and CSS resources, it will roughly go through the following steps.(1) HTML generate HTML tree(2) CSS forms CSS rules(3) The two form a rendering tree(4) Go to […]