how to create 100% vertical line in css

Use an absolutely positioned pseudo element:

ul:after {
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  border: 1px solid black;
  top: 0;
  left: 100px;
}

Demo

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

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.

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.