18

我想创建一条像这样覆盖整个页面的垂直线

在此处输入图像描述

这是我的代码

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

结果显示是这样的 在此处输入图像描述

4

8 回答 8

27

使用绝对定位的伪元素：

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

演示

于 2012-11-04T18:18:25.300 回答
9

正如 bookcasey 所说，height: 100%;只会使 DIV 100% 成为其父级。出于这个原因，您需要html, body {height: 100%; min-height: 100%}按照 Marko 的说明进行操作，而且，对 . 的每个父 DIV 进行相同的更改#menu。

因为您有一个底部边框，所以将右边框应用于父 DIV，height: 100%;并将底部边框应用于#menu您希望底部边框显示的任何高度。

于 2012-11-04T18:19:18.170 回答
5

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

解决方案1：

如果您可以使用绝对定位元素，则可以使用topandbottom属性而不是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%;
}​

演示

于 2012-11-04T18:18:23.720 回答
1

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

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

希望能帮助到你。

于 2012-11-04T18:17:04.727 回答
0

我对我的大部分垂直元素使用这个 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 行。

于 2014-11-04T18:31:34.427 回答
0 
<!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>
于 2016-01-20T20:09:02.173 回答
0

我已经min-height: 100vh;在我的一些项目上取得了巨大的成功。见例子。

于 2017-10-31T09:22:07.643 回答
0

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

HTML

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

CSS

.main{
 position: relative;
}

.body{
 position: absolute;
 height: 100%;
}
于 2020-01-04T07:59:55.087 回答