it-swarm.com.ru

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

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

enter image description here

вот мой код

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

результат шоу, как это enter image description here

13
user1493448

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

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

6
Matt Olan

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

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

Демо

16
bookcasey

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

Решение 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
Christofer Eliasson

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

0
Bjørn Stenfeldt

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

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

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

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

Я использую это позиционирование 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="height: 250px;
width: 1px;

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

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

0
Joe