web-dev-qa-db-fra.com

comment créer une ligne 100% verticale en css

Je veux créer une ligne verticale qui couvre toute la page comme celle-ci

enter image description here

voici mon code

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

résultat montrer comme ça enter image description here

htmlcsshtml5css3
13
user1493448

Comme le dit bookcasey, height: 100%; ne créera la DIV que 100% de sa société mère. Pour cette raison, vous devrez faire html, body {height: 100%; min-height: 100%} comme indiqué par Marko, mais apportez la même modification sur chaque DIV parent de #menu.

Comme vous avez une bordure inférieure, appliquez ensuite la bordure droite à la DIV parent à height: 100%; et appliquez la bordure inférieure à votre #menu à la hauteur souhaitée de la bordure inférieure.

6
Matt Olan

Utilisez un pseudo élément absolument positionné:

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

Démo

16
bookcasey

Il y a au moins deux façons de résoudre ce problème.

Solution 1:

Si vous êtes prêt à utiliser un élément positionné de manière absolue, vous pouvez utiliser les propriétés top et bottom au lieu de height. En définissant top et bottom sur 0, vous forcez l'élément à prendre toute la hauteur.

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

Démo

Solution 2:

Une autre solution consisterait à forcer les éléments HTML et BODY à une hauteur de 100% afin de laisser la place à un menu de 100% de la hauteur:

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

Démo

4
Christofer Eliasson

J'ai utilisé min-height: 100vh; avec beaucoup de succès sur certains de mes projets. Voir exemple .

0
Bjørn Stenfeldt

100% height fait référence à la hauteur du conteneur parent. Pour que votre div puisse couvrir toute la hauteur du corps, vous devez définir ceci:

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

J'espère que ça aide.

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

J'utilise ce positionnement CSS pour la plupart de mes éléments verticaux:

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

Modifiez la hauteur et la largeur pour s’adapter à la page ou faites en sorte que la ligne horizontale permute la hauteur en largeur:

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

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

au lieu d'une ligne html standard.

0
Joe