Как создать 100% вертикальную линию в css

Я хочу создать вертикальную линию, охватывающую всю страницу, такую как

вот мой код

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

Результат

выглядит так:

Ответ 1

Как сказал книжный магазин, height: 100%; сделает только DIV 100% своего родителя. По этой причине вам нужно будет сделать html, body {height: 100%; min-height: 100%}, как указано Марко, но также внести одно и то же изменение в каждый родительский DIV #menu.

Поскольку у вас есть нижняя граница, затем примените правую границу к родительскому DIV в height: 100%; и примените нижнюю границу к вашему #menu на любой высоте, на которой вы хотите, чтобы нижняя граница отображалась.

Ответ 2

Используйте абсолютно позиционированный псевдоэлемент:

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

Демо

Ответ 3

Существует как минимум два способа решить эту проблему.

Решение 1:

Если вы используете абсолютно позиционированный элемент, вы можете использовать свойства top и bottom вместо height. Установив как top, так и bottom на 0, вы заставляете элемент занимать всю высоту.

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

Демо

Решение 2:

Другим способом было бы заставить элементы HTML и BODY достичь 100% высоты, чтобы дать место для меню со 100% высотой:

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

Демо

Ответ 4

Высота 100% относится к высоте родительского контейнера. Для того, чтобы ваш div достиг высоты вашего тела, вы должны установить это:

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

Надеюсь, что это поможет.

Ответ 5

Я использую это позиционирование css для большинства своих вертикальных элементов:

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

измените высоту и ширину, чтобы она соответствовала странице, или чтобы горизонтальная линия меняла высоту до ширины

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

вместо стандартной html-строки

Ответ 6

<!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>

Ответ 7

Я использовал min-height: 100vh; с большим успехом в некоторых своих проектах. См. пример.