Question 218611 in Html Question posted in
Some basic documentation can be found here.

Html – How to set a line full height of the body

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.

Tags:

3

Answers


  1. 0

    Have a look at this post

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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0 
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search