Question

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

enter image description here

这是我的代码

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

结果显示如下 enter image description here

Answer 1

使用绝对定位的伪元素：

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

Demo

Answer 2

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

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

Answer 3

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

解决方案1：

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

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

<强> Demo

解决方案2：

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

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

<强> Demo

Answer 4

100％高度是指父容器的高度。为了让你的div达到身体的全高，你必须设置它：

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

希望它有所帮助。

Answer 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="height: 250px;
width: 1px;

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

而不是标准的html行。

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

Answer 7

我已经在我的一些项目中使用<ul class="dropdown-menu dropdown-menu-form" role="menu">... $("document").ready(function() { $('.dropdown-menu').on('click', function(e) { if($(this).hasClass('dropdown-menu-form')) { e.stopPropagation(); } }); });取得了巨大成功。 See example

Answer 8

当我对此进行测试时，我尝试使用position属性，并且效果很好。

HTML

<div class="main">
 <div class="body">
 //add content here
 </body>
</div>

CSS

.main{
 position: relative;
}

.body{
 position: absolute;
 height: 100%;
}

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

8 个答案: