How to make the height of child div fill the remaining space of parent container in CSS

1. Use floating method

Effect picture:

The code is as follows: (Note that the height of .content is 500px, which 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); to observe the effect)

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

2. Use positioning

The code is as follows: (This method is recommended because it does not have the disadvantages of the above method)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Height fills the 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, fill the remaining space </div>
		</div>
	</body>
</html>

This concludes this article on how to use CSS to make the height of a child div fill the remaining space of its parent container. For more information on how to use CSS to make the height of a child div fill the remaining space, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future!

<<: JavaScript implements three common web effects (offset, client, scroll series)

>>: HTML page common style (recommended)

A simple method to be compatible with IE6's min-width and min-height

How to make the height of child div fill the remaining space of parent container in CSS

1. Use floating method

2. Use positioning

A simple method to be compatible with IE6's min-width and min-height

Pure CSS to display the √ sign in the lower right corner after selecting the product

Analysis of the reasons why Vue3 uses Proxy to implement data monitoring

Mybatis mysql delete in operation can only delete the first data method

CentOS 7.2 builds nginx web server to deploy uniapp project

How to deploy redis in linux environment and install it in docker

Html makes a simple and beautiful login page

Docker meets Intellij IDEA, Java development improves productivity tenfold

Solve the problem of missing msvcr100.dll file when building mysql in windows service 2012 Alibaba Cloud server

CSS fixes the container level (div...) tag in one position (on the far right of the page)

Recommend

JavaScript offset implements mouse coordinate acquisition and module dragging within the window

DOM operation table example (DOM creates table)

How to create a test database with tens of millions of test data in MySQL

Implementation of mysql decimal data type conversion

Detailed explanation of how NGINX counts the website's PV, UV, and independent IP

MySQL 5.7.20 compressed version download and installation simple tutorial

Detailed explanation of redo log and undo log in MySQL

A brief discussion on innodb's index page structure, insert buffer, and adaptive hash index

Teach you to connect to MySQL database using eclipse

Front-end JavaScript Promise

Detailed explanation of how to use amoeba to implement read-write separation of MySQL database

9 great JavaScript framework scripts for drawing charts on the web

How to quickly install tensorflow environment in Docker

Vue's vue.$set() method source code case detailed explanation

Detailed explanation of Django+Vue+Docker to build an interface testing platform