CODEWITHSUNDEEP
htmlcss
user1493448
user1493448

Reputation: 341

how to create 100% vertical line in css

I want to create a vertical line that cover whole page like this

enter image description here

here is my code

#menu
{
border-left: 1px solid black;
height: 100%;
}

result show like this enter image description here

Upvotes: 21

Views: 147066

Answers (8)

Nicole Pauline De Guzman
Nicole Pauline De Guzman

Reputation: 1

When I tested this, I tried using the position property and it worked perfectly.

HTML

<div class="main">
 <div class="body">
 //add content here
 </body>
</div>

CSS

.main{
 position: relative;
}

.body{
 position: absolute;
 height: 100%;
}

Upvotes: 0

Joe
Joe

Reputation: 1

I use this css positioning for most of my vertical elements:

<div class="vertical-line" style="height: 250px;
width: 1px;
background-color: #81F781;
margin-left: 0px;
margin-top: -100px;
postion: absolute;
border-radius: 2px;">
</div>

Change the height and width to fit the page, or to make a horizontal line swap the height to width:

<div class="vertical-line" style="height: 250px;
width: 1px;

<div class="vertical-line" style="width: 250px;
height: 1px;

instead of a standard html line.

Upvotes: 0

Bj&#248;rn Stenfeldt
Bj&#248;rn Stenfeldt

Reputation: 1602

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

Upvotes: 0

ramya gurrala
ramya gurrala

Reputation: 1

<!DOCTYPE html>
<html>
<title>Welcome</title>
<style type="text/css">
    .head1 {
        width:300px;
        border-right:1px solid #333;
        float:left;
        height:500px;
    }
   .head2 {
       float:left;
       padding-left:100PX;
       padding-top:10PX;
   }
</style>
<body>
   <h1 class="head1">Ramya</h1>
   <h2 class="head2">Reddy</h2>
</body>
</html>

Upvotes: 0

Matt Olan
Matt Olan

Reputation: 1959

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.

Upvotes: 10

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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

Upvotes: 6

bookcasey
bookcasey

Reputation: 40423

Use an absolutely positioned pseudo element:

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

Demo

Upvotes: 29

Marko Francekovic
Marko Francekovic

Reputation: 1480

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.

Upvotes: 1

Related Questions