how to create 100 vertical line in css

Question

I want to create a vertical line that cover whole page like this    here is my code   menu   border-left  1px solid black  height  100       result show like this

User · Accepted Answer

As bookcasey said  height  100   will only make the DIV 100  of its parent  For this reason you will need to make html  body  height  100   min-height  100   as stated by Marko  but also  make the same change on every parent DIV of  menu   Because you have a bottom border  then apply the right border to the parent DIV at height  100   and apply the bottom-border to your  menu at whatever height you want the bottom border to show up

User · Answer

lt  DOCTYPE html gt   lt html gt   lt title gt Welcome lt  title gt   lt style type  text css  gt       head1           width 300px          border-right 1px solid  333          float left          height 500px            head2          float left         padding-left 100PX         padding-top 10PX        lt  style gt   lt body gt      lt h1 class  head1  gt Ramya lt  h1 gt      lt h2 class  head2  gt Reddy lt  h2 gt   lt  body gt   lt  html gt

User · Answer

100  height refers to the height of the parent container  In order for your div to go full height of the body you have to set this   html  body  height  100   min-height  100     Hope it helps

User · Answer

Use an absolutely positioned pseudo element   ul after     content        width  0    height  100     position  absolute    border  1px solid black    top  0    left  100px      Demo

User · Answer

When I tested this  I tried using the position property and it worked perfectly   HTML   lt div class  main  gt    lt div class  body  gt     add content here   lt  body gt   lt  div gt    CSS   main   position  relative      body   position  absolute   height  100

User · Answer

I ve used min-height  100vh  with great success on some of my projects  See example

User · Answer

I use this css positioning for most of my vertical elements    lt div class  vertical-line  style  height  250px  width  1px  background-color   81F781  margin-left  0px  margin-top  -100px  postion  absolute  border-radius  2px   gt   lt  div gt    Change the height and width to fit the page  or to make a horizontal line swap the height to width    lt div class  vertical-line  style  height  250px  width  1px    lt div class  vertical-line  style  width  250px  height  1px       instead of a standard html line

User · Answer

There are at least two ways to solve this   Solution 1   If you are okay with using an absolutely positioned element  you can use the top and bottom properties instead of height  By setting both top and bottom to 0 you force the element into taking up full height    menu       position  absolute      border-right  1px solid black      top  0      bottom  0       Demo  Solution 2   Another way would be to force the HTML and BODY elements into a 100  height  to give room for a menu with 100  height   body  html   height  100      menu       border-right  1px solid black      height  100        Demo

[html] how to create 100% vertical line in css

Examples related to html

Examples related to css