How to make CSS child elements highly consistent with parent elements

Absolute positioning method:

(1) Set the parent element to relative positioning. If the height of the parent element is not specified, it will change with the height of the child element on the left.

.parent {
	/*Key code*/
	position: relative;
	
	/*Other styles*/
	width: 800px;
	color: #fff;
	font-family: "Microsoft Yahei";
	text-align: center;
}

(2) The case where an element on the left has a minimum height

.left {
	min-height: 700px;
	width: 600px;
}

(3) If you want the element on the right to be the same height as the parent element, you can use absolute positioning. If you don’t want to write both top and bottom, you can write one and then write height: 100% to achieve the same effect.

.right {
	/*Key code*/
	width: 200px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	
	/*Other styles*/
	background: #ccc;
	
}

(4) Complete example code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Child element height is consistent with parent element</title>
	<style>

		.parent{
			position: relative;
			background: #f89;

			width: 800px;
			color: #fff;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		.left {
			min-height: 700px;
			width: 600px;

		}
		.right {
			width: 200px;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;

			background: #ccc;
			
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="left">
			The left side has an uncertain height. The height of parent changes with the height of the left side, and the right side also changes accordingly. </div>
		<div class="right">
			The height here is consistent with the height of the parent element </div>
	</div>
</body>
</html>

(5) Effect

(6) Here comes the question:

What if the height of the child element on the right exceeds .parent?

.right-inner {
	background: limegreen;
	height: 1024px;
}

<div class="right">
	<div class="right-inner">The child element of right has a height of 1024px, which will break the container. Adding overflow:auto to .right will prevent overflow</div>
</div>

The effect diagram is as follows:

Full code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Child element height is consistent with parent element</title>
	<style>

		.parent{
			position: relative;
			background: #f89;

			width: 800px;
			color: #fff;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		.left {
			min-height: 700px;
			width: 600px;

		}
		.right {
			width: 200px;
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;

			overflow:auto;

			background: #ccc;
			
		}
		.right-inner {
			background: limegreen;
			height: 1024px;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="left">
			The left side has an uncertain height. The height of parent changes with the height of the left side, and the right side also changes accordingly. </div>
		<div class="right">
			<div class="right-inner">The child element of right has a height of 1024px, which will break the container. Adding overflow:auto to .right will prevent overflow</div>
		</div>
	</div>
</body>
</html>

(7) Other resources

http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent

This is the end of this article about how to make CSS child elements have the same height as their parent elements. For more information about CSS child element and parent element height, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: MySQL InnoDB transaction lock source code analysis

>>: Tutorial on how to create a comment box with emoticons using HTML and CSS

How to check if a table exists in MySQL and then delete it in batches

How to make CSS child elements highly consistent with parent elements

How to check if a table exists in MySQL and then delete it in batches

How to deploy Go web applications using Docker

Details on overriding prototype methods in JavaScript instance objects

CSS to achieve the like card effect in the lower right corner of the web page (example code)

CSS stacking and z-index example code

Implementation of the Pycharm installation tutorial on Ubuntu 18.04

Let's talk about the Vue life cycle in detail

How to quickly import data into MySQL

In-depth understanding of the life cycle comparison between Vue2 and Vue3

Running PostgreSQL in Docker and recommending several connection tools

Recommend

Detailed explanation of CSS complex selectors and CSS font styles and color attributes

How to check if data exists before inserting in mysql

A pitfall and solution of using fileReader

Detailed tutorial on installing MySQL database on Alibaba Cloud Server

What you need to know about MySQL auto-increment ID

Detailed explanation of HTML basics (Part 1)

How to parse the attribute interface of adding file system in Linux or Android

Tips for efficient use of CSS style sheets: Take full advantage of the power of style sheets

How to reference jQuery in a web page

Detailed tutorial on installation and configuration of MySql 5.7.17 winx64

How to batch generate MySQL non-duplicate mobile phone number table example code

CSS tips for controlling animation playback and pause (very practical)

Problems and solutions for installing Docker on Alibaba Cloud

Practice of using SuperMap in Vue

Can asynchrony in JavaScript save await?