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
Comparison of efficiency between single-table query and multi-table join query in MySql database
During this period of time, while working on a pr...
Summary of react basics
Table of contents Preface start React Lifecycle R...
Django online deployment method of Apache
environment: 1. Windows Server 2016 Datacenter 64...
A detailed explanation of the subtle differences between Readonly and Disabled
Readonly and Disabled both prevent users from chan...
Summary of practical experience of HTML knowledge points
1. The table tag is table, tr is row, td is cell, ...
Thinking about grid design of web pages
<br />Original address: http://andymao.com/a...
18 common commands in MySQL command line
In daily website maintenance and management, a lo...
About converting textarea text to html, that is, carriage return and line break
Description: Change the carriage return in the tex...
A colorful cat under Linux
Friends who have used the Linux system must have ...
MySQL 8.0.13 installation and configuration method graphic tutorial
This article shares the installation and configur...
Combining XML and CSS styles
student.xml <?xml version="1.0" enco...
A brief discussion on the role of HTML empty links
Empty link: That is, there is no link with a targ...
The simplest form implementation of Flexbox layout
Flexible layout (Flexbox) is becoming increasingl...
CSS style reset and clear (to make different browsers display the same effect)
In order to make the page display consistent betwe...
mysql 5.6.23 winx64.zip installation detailed tutorial
For detailed documentation on installing the comp...