how to create 100% vertical line in css


Tags: html,css,html5,css3

Problem :

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



Solution :

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.


    CSS Howto..

    asp.net+css+jQuery - how does it all work together?

    jQuery: accordion-LIKE format. how to prevent div from collapsing if one of the checkboxes is checked

    How to toggle visibility of 2 divs after clicking a mailto link?

    CSS how to target element beside my current element?

    How to make this geometrical “translation” effect with javascript?

    How to eliminate scroll text jumps

    How to convert a rectangle to TRBL CSS rect value?

    CSS element class - Height differs based on content, how to fix?

    How to make DIV constantly display text on click?

    how to make background fit on screen bootstrap3

    How to toggle display: inline and display toggle?

    BackboneJS + HandlebarsJS - how to add image based on css

    How to make the new long shadow trend with CSS?

    How to load multiple CSS files within a JS script

    How to get Material-UI Drawer to 'squeeze' other content when open

    How to edit css margin-top for a text in mobile version

    CSS How to fix element position after some scroll without using jquery

    How to assign CSS background image properties mixing classes and ids

    How do I push inline elements onto the next line

    How do I get this HTML canvas animation to appear on top of my image?

    How to generate image background that flips with each duplication in css? [duplicate]

    how can i make the li inside the div be horizontal?

    How to force CSS to be displayed on empty element following whitespace

    How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

    How to apply a css class to master page based on the url using jquery? [closed]

    How to float text on image in css3

    How to set this CSS arrow transparent?

    How to force firefox to use custom CSS for anchor tags that contain “#” or “javascript:”?

    How do I align tables with HTML?

    How to add space to left-right of the Web-Page using HTML/CSS