How to set a line full height of the body

Question

The body of my website doesn't have a specific height so I can not find the exact size of that. I want to show a line from top to down like this:

.lines {
  height: 100%;
  position: absolute;
  background-color: #000;
  height: 100%;
  width: 20px;
  position: absolute;
  right: 50%;
  top:0;
}


.div1 {
  background-color: red;
  width: 500px;
  height: 500px;
}

.div2 {
  margin-top: 20px;
  background-color: blue;
  width: 500px;
  height: 500px;
}

<body>
  <div class="lines">

  </div>
  <div class="div1">

  </div>
  <div class="div2">

  </div>

</body>

but I can not find the exact height of my body. and height: 100%; just fill in a part of the website.

It doesn't work 100vh is 100% of the display device not 100% height of the body element. — Mohammad Vard, Jul 29 '23 at 12:20

score 3 · Accepted Answer · answered Jul 29 '23 at 12:20

Change .lines to be to position: fixed.

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block. Its final position is determined by the values of top, right, bottom, and left.

.lines {
  position: fixed;
  height: 100%;
  background-color: #000;
  width: 20px;
  right: 50%;
  top:0;
}


.div1 {
  background-color: red;
  width: 500px;
  height: 500px;
}

.div2 {
  margin-top: 20px;
  background-color: blue;
  width: 500px;
  height: 500px;
}

<body>
  <div class="lines"></div>
  <div class="div1"></div>
  <div class="div2"></div>
</body>

Thank you for your response. – Mohammad Vard Jul 29 '23 at 12:25 — Mohammad Vard, Jul 29 '23 at 12:25

score 0 · Answer 2 · answered Jul 29 '23 at 12:18

0

Have a look at this post

I suggest looking in here by using height: 100vh;

answered Jul 29 '23 at 12:18

Joerie

77
8

score 0 · Answer 3 · answered Jul 29 '23 at 12:23

body{position:relative; width:100%; height:100%; margin:0px;}
.lines {
  height: 100%;
  position: absolute;
  background-color: #000;
  height: 100vh;
  width: 20px;
  position: absolute;
  right: 50%;
  top:0;
}


.div1 {
  background-color: red;
  width: 500px;
  height: 50vh;
}

.div2 {
  margin-top: 0px;
  background-color: blue;
  width: 500px;
  height: 50vh;
}

<body>
  <div class="lines">

  </div>
  <div class="div1">

  </div>
  <div class="div2">

  </div>

</body>

How to set a line full height of the body

3 Answers3