How to make a top-bottom vertical line

Question

How do I make a vertical line from the top to bottom of my site. That should cover the whole height of my site

I have tried height: 100%;, but they disappear.

 .vertical-hr {
  margin-top: -8px;
  width: 0.1%;
  height: 100%;
  float: right;
  background-color: black;
 }

 <div class="vertical-hr"></div>

no need to delete and repeat the same question, it will get closed the same way. If the duplicate doesn't solve your issue, edit to say way — Temani Afif, Oct 06 '19 at 12:43
@TemaniAfif it isn't even close my friend. Please remove the duplicate — scriver, Oct 06 '19 at 13:16
read the duplicate and you understand your issue and why the code isn't working — Temani Afif, Oct 06 '19 at 13:45

score 1 · Answer 1 · edited Oct 06 '19 at 16:13

1

Put vh instead of %

height: 100vh;

and remove float

try the code snippet

.vertical-hr {
  margin-top: -8px;
  width: 1px;
  height: 100vh;
  position: absolute;
  right: 10px;
  background-color: black;
 }

<div class="vertical-hr"></div>

edited Oct 06 '19 at 16:13

Abal

309
1
20

answered Oct 06 '19 at 10:09

PRABHAT SINGH RAJPUT

1,455
1
12
31

Thank you but I can't see the line when I implement this to my site. – scriver Oct 06 '19 at 13:07
It's working fine, Try this edited one. Otherwise share code of your parent divs. – PRABHAT SINGH RAJPUT Oct 06 '19 at 16:15

Abbas Mashahaddy · Answer 2 · 2019-10-07T07:14:10.677

0

You can achieve it by using a fixed position. Give it a higher stack order(z-index) so that it always appear in the front.

<style>
    .vertical-hr {
        width: 20px;
        background-color: black;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 9999999999;
    }
</style>
<div class="vertical-hr"></div>

edited Oct 07 '19 at 07:14

answered Oct 06 '19 at 10:15

Abbas Mashahaddy

1
2

How to make a top-bottom vertical line

2 Answers2