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

Solution to automatically submitting the form and jumping to other pages after pressing Enter on the web page

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

Solution to automatically submitting the form and jumping to other pages after pressing Enter on the web page

Detailed explanation of nginx server installation and load balancing configuration on Linux system

Vue uses Canvas to generate random sized and non-overlapping circles

Solve the problem of using less in Vue

Detailed explanation of the idea of distributed lock in MySQL with the help of DB

Complete steps to configure a static IP address for a Linux virtual machine

Example of how nginx implements dynamic and static separation

How to modify port 3389 of Windows server 2008 R2 remote desktop

Ubuntu16.04 installation mysql5.7.22 graphic tutorial

MySql forgotten password modification method is suitable for versions 5.7 and above

Recommend

Advanced crawler - Use of Scrapy_splash component for JS automatic rendering

Summary of fragmented knowledge of Docker management

A brief discussion on JavaScript throttling and anti-shake

Ajax responseText parses json data case study

How to display small icons in the browser title bar of HTML webpage

Docker configuration Alibaba Cloud Container Service operation

mysql5.7.17.msi installation graphic tutorial

Clever use of webkit-box-reflect to achieve various dynamic effects (summary)

Pure CSS to achieve hover image pop-out pop-up effect example code

MySQL simple example of sorting Chinese characters by pinyin

Things to note when designing web pages for small-screen mobile devices

Examples of 4 methods for inserting large amounts of data in MySQL

Tutorial on deploying the open source project Tcloud with Docker on CentOS8

Set the input to read-only via disabled and readonly

MySQL database query performance optimization strategy