HTML vertikale Linie Separator

Question

ich eine horizontale Linie Separator wie so:

/* line separator */ 
 
    .aSeparator { 
 
    border-top:1px solid #5f656d; 
 
    height:1px; 
 
    margin:16px 0; 
 
    }

<div class="aSeparator"></div>

Ansicht hier: https://jsfiddle.net/xjna71pn/

Es ist cool, weil es die Länge des Fensters bleibt abzüglich der Polsterung.

Meine Frage ist, wie kann ich eine vertikale erstellen?

Ich versuchte das offensichtliche, border-left, aber es schien nicht zu funktionieren.

Answer 1

Es funktioniert mit Rand links, aber Sie müssen eine höhere Höhe angeben (derzeit auf 1px).

Answer 2

Sie müssen eine bestimmte Höhe festlegen. Ihre vertikale Trenn CSS würde so aussehen:

.aVerticalSeparator { 
    border-left: 1px solid #5f656d; /* Border on the left */ 
    width: 1px; /* Width instead of height */ 
    height: 200px; 
} 

Um es über die gesamte Höhe des übergeordneten machen besetzen ist, wird seine Höhe zu 100% setzen müssen, aber das übergeordnete Element muss eine Höhe haben.

Here's a demo mit einem einfachen HTML-Dokument, in dem die Stammelemente (html und body) eine bestimmte Höhe eingestellt haben, so dass der Separator auf 100% auffüllen kann.

Answer 3

Das ist genau das, was ich realisiert:

In HTML:

<div class="vertLine"> 
    /* Some content, you want to the left of the vertical line.*/ 
</div> 

In CSS:

.vertLine { 
    border-right:1px #ff0000; /* line 1 pixel width, length of "Some content" */ 
} 

zu etwas anders, was andere vorgeschlagen, aber die genaue ist was ich gesucht habe.

Sie müssen keine Höhe/Länge angeben, da es nur die Höhe dessen ist, was immer Sie dazwischen platzieren. z.B. Wenn Sie ein 100px-Bild einfügen, wird die Linie 100 Pixel hoch sein.