wake-up-neo.net

so erstellen Sie eine 100% vertikale Linie in CSS

Ich möchte eine vertikale Linie erstellen, die die gesamte Seite so abdeckt

enter image description here

hier ist mein code

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

ergebnisshow wie folgt enter image description here

htmlcsshtml5css3
13
user1493448

Wie im Bookcase gesagt, macht height: 100%; das DIV nur zu 100% von seinem übergeordneten Element. Aus diesem Grund müssen Sie html, body {height: 100%; min-height: 100%} wie von Marko angegeben vornehmen, aber auch an jedem übergeordneten DIV von #menu die gleiche Änderung vornehmen.

Da Sie einen unteren Rand haben, wenden Sie den rechten Rand unter height: 100%; an das übergeordnete DIV an und den unteren Rand auf Ihren #menu in der Höhe, in der der untere Rand angezeigt werden soll.

6
Matt Olan

Verwenden Sie ein absolut positioniertes Pseudoelement:

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

Demo

16
bookcasey

Es gibt mindestens zwei Möglichkeiten, dies zu lösen.

Lösung 1:

Wenn Sie mit einem absolut positionierten Element zufrieden sind, können Sie die Eigenschaften top und bottom anstelle von height verwenden. Indem Sie top und bottom auf 0 setzen, zwingen Sie das Element, seine volle Höhe einzunehmen.

#menu
{
    position: absolute;
    border-right: 1px solid black;
    top: 0;
    bottom: 0;
}​

Demo

Lösung 2:

Eine andere Möglichkeit wäre, die HTML- und BODY-Elemente auf eine Höhe von 100% zu bringen, um Platz für ein Menü mit 100% Höhe zu schaffen:

body, html { height: 100%; }
#menu
{
    border-right: 1px solid black;
    height: 100%;
}​

Demo

4
Christofer Eliasson

Ich habe min-height: 100vh; mit großem Erfolg für einige meiner Projekte verwendet. Siehe Beispiel .

0
Bjørn Stenfeldt

100% Höhe bezieht sich auf die Höhe des übergeordneten Containers. Damit Ihr Div die volle Körpergröße erreicht, müssen Sie Folgendes einstellen:

html, body {height: 100%; min-height: 100%}

Ich hoffe es hilft.

0
Marko Francekovic
<!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>
0
ramya gurrala

Ich benutze diese CSS-Positionierung für die meisten meiner vertikalen Elemente:

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

Ändern Sie die Höhe und Breite, um sie an die Seite anzupassen, oder um eine horizontale Linie zwischen Höhe und Breite zu verschieben:

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

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

anstelle einer Standard-HTML-Zeile.

0
Joe