How to draw a vertical line between two div tags in HTML

Recently, when I was drawing an interface, I encountered a requirement: draw a vertical line in the interface, and this vertical line needs to automatically fill the entire parent div in height (that is, the height of this vertical line is the same as the higher of the two divs).

Normally, we can draw a horizontal line directly using the tag <hr>, but when we try to draw a vertical line, we find that we can't find the tag. I searched for information online and generally recommended using js. I was a bit paranoid and wanted to use pure CSS to do it. Finally I found a solution. Let me share my approach below.

Add another div between the two child divs, set the left (right) border to be visible, and use the principle of offsetting the positive and negative values of padding-bottom | margin-bottom. For example, setting padding-bottom:1600px; margin-bottom:-1600px ; we can understand that padding is used to expand the outer layer tags, while margin is not used to expand the outer layer tags. That is, when padding-bottom is used, the height of the outer label is expanded, and the outer label uses overflow:hidden; to hide the excess height, so that the height can be aligned with the highest column; and margin is related to module layout, margin can offset the box expanded by padding so that the layout can start from the content part.

Here is the code:

body{  
    margin-top:100px;  
    margin-left:200px;  
}  
.maindiv{  
    width:900px;  
    padding:10px;  
    overflow:hidden; /*Key*/  
    border:1px solid black;  
}  
.leftdiv{  
    float:left;  
    width:400px;  
    background-color:#CC6633;  
}  
.rightdiv{  
    float:right;  
    width:400px;  
    background-color:#CC66FF;  
}  
.centerdiv{  
    float:left;  
    width:50px;  
    border-right: 1px dashed black;  
    padding-bottom:1600px; /*Key*/  
    margin-bottom:-1600px; /*Key*/  
}  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>Vertical line drawing</title>  
<link href="../css/demo.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
    <div class="maindiv">  
        <div class="leftdiv"><br><br><br><br><br><br><br></div>  
        <div class="centerdiv"></div>  
        <div class="rightdiv"><br><br><br><br><br><br><br><br></div>  
    </div>  
</body>  
</html>

Effect picture:

By the way, write some ideas and key codes of js

Compare the heights of the two child divs to see which one is taller. You can also achieve this by setting the adjacent border of the taller div to be visible.

The following is the js code

function myfun(){  
  var div1 = document.getElementById("content");  
  var div2 = document.getElementById("side");  
  var h1=div1.offsetHeight;  
  var h2=div2.offsetHeight;  
    if(h1>h2){  
        div1.style.borderRight="1px dashed #B6AEA3";  
    }else{  
        div2.style.borderLeft="1px dashed #B6AEA3";  
  }  
}

Summarize

The above is what I introduced to you about how to draw a vertical line between two div tags in HTML. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Use SQL statement to determine whether the record already exists before insert

>>: Vue3 slot usage summary