如何在css中创建100%垂直线

Question

我想创建一个覆盖整个页面的垂直线

这是我的代码

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

结果显示像这样

Answer 1

使用绝对定位的伪元素:

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

演示

Answer 2

至少有两种方法可以解决这个问题。

\n\n

解决方案一：

\n\n

如果您可以使用绝对定位的元素，则可以使用top和bottom属性而不是height。通过设置top和 ，您bottom可以0强制元素占据整个高度。

\n\n

#menu\n{\n    position: absolute;\n    border-right: 1px solid black;\n    top: 0;\n    bottom: 0;\n}\xe2\x80\x8b\n

\n\n

演示

\n\n

解决方案2：

\n\n

另一种方法是强制 HTML 和 BODY 元素达到 100% 高度，为 100% 高度的菜单留出空间：

\n\n

body, html { height: 100%; }\n#menu\n{\n    border-right: 1px solid black;\n    height: 100%;\n}\xe2\x80\x8b\n

\n\n

演示

\n

Answer 3

正如书店所说,height: 100%;只会使DIV成为其父母的100%.因此,您需要html, body {height: 100%; min-height: 100%}按照Marko的说明进行制作,同时对每个父DIV进行相同的更改#menu.

因为您有一个底部边框,然后将右边框应用于父DIV,height: 100%;并将底部边框应用于您#menu想要显示底部边框的任何高度.