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
Recommend
Installing the ping tool in a container built by Docker
Because the Base images pulled by Docker, such as...
Native js implementation of slider interval component
This article example shares the specific code of ...
JavaScript file loading and blocking issues: performance optimization case study
Let me start with a question: When writing an HTM...
MySQL fuzzy query usage (regular, wildcard, built-in function)
Table of contents 1. MySQL wildcard fuzzy query (...
Proxy realizes the principle of two-way binding of Vue3 data
Table of contents 1. Advantages of proxy vs. Obje...
Vue implements the magnifying glass function of the product details page
This article shares the specific code of Vue to i...
Why does using limit in MySQL affect performance?
First, let me explain the version of MySQL: mysql...
MySQL uses custom functions to recursively query parent ID or child ID
background: In MySQL, if there is a limited level...
The difference and advantages and disadvantages of Mysql primary key UUID and auto-increment primary key
introduction I used postgresql database for some ...
Details after setting the iframe's src to about:blank
After setting the iframe's src to 'about:b...
What is the function and writing order of the a tag pseudo class
The role of the a tag pseudo-class: ":link&qu...
A brief discussion on the understanding of TypeScript index signatures
Table of contents 1. What is an index signature? ...
MySQL's method of dealing with duplicate data (preventing and deleting)
Some MySQL tables may contain duplicate records. ...
Vue+express+Socket realizes chat function
This article shares the specific code of Vue+expr...
A brief discussion on whether MySQL can have a function similar to Oracle's nvl
Use ifnull instead of isnull isnull is used to de...