Implementation method of high consistency between CSS child element and parent element

Time:2020-11-16

Absolute positioning method:

(1) Set the parent element to relative positioning. If the height of the parent element is not written, 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) When an element on the left has a minimum height


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

(3) If you want the height of the right element to be consistent with that of the parent element, you can use absolute positioning to set it. If you don’t want to write top and bottom at the same time, you can write it again when you write one height:100% The same effect can be achieved

.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 > the height of the child element is the same as that of the 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 height of the parent changes with the height of the left and the right
		</div>
		<div class="right">
			The height here is the same as that of the parent element
		</div>
	</div>
</body>
</html>

(5) Effect

(6) Here’s the question:
 

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


.right-inner {
	background: limegreen;
	height: 1024px;
}
<div class="right">
	The sub element of < div class = "right inner" > right, with a height of 1024px, will break the container and add the overflow:auto  This prevents overflow < / div > from happening
</div>

The effect picture is as follows:

Complete code:

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	< title > the height of the child element is the same as that of the 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 height of the parent changes with the height of the left and the right
		</div>
		<div class="right">
			The sub element of < div class = "right inner" > right, with a height of 1024px, will break the container and add the overflow:auto  This prevents overflow < / div > from happening
		</div>
	</div>
</body>
</html>

(7) Other resources

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

This article on the CSS child element and the parent element of the highly consistent implementation of this article introduced here, more related CSS child element parent element height content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!