Recently, when I was drawing an interface, I encountered a requirement: draw a vertical line in the interface, and the height of this vertical line needs to automatically occupy the entire parent div (that is, the height of this vertical line is the same as the height of the two divs). The higher one is the same height).
Usually we draw a horizontal line and just use the tag <hr>. When we draw a vertical line, we find that the tag cannot be found. After searching for information on the Internet, it is generally recommended to use js. I was paranoid and wanted to use pure CSS, and finally found a solution. I will share my approach below.
Add one more div to the two sub-divs, set the left (right) border to be visible, and use the principle of using padding-bottom|margin-bottom's positive and negative values to offset each other. For example, setting padding-bottom:1600px; margin-bottom:-1600px ; we can understand it as: padding can be used to expand the outer label but margin is not used to expand the outer label. That is, when padding-bottom is used to expand the height of the outer label, 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 the module layout, and margin can offset the padding The stretched box allows the layout to start from the content section.
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 method</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></div> <div class=centerdiv></div> <div class=rightdiv><br><br><br><br><br><br><br></div> </div> </body> </html >Rendering:
By the way, write down the ideas and key codes of js
Compare the height of two child divs which one is higher. You can also achieve the goal by choosing to make the adjacent border of the taller div visible.
The following is the code of js
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; } } SummarizeThe above is the editor's introduction to 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 the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!