我想创建一条像这样覆盖整个页面的垂直线
这是我的代码
#menu
{
border-left: 1px solid black;
height: 100%;
}
结果显示是这样的
使用绝对定位的伪元素:
ul:after {
content: '';
width: 0;
height: 100%;
position: absolute;
border: 1px solid black;
top: 0;
left: 100px;
}
正如 bookcasey 所说,height: 100%;
只会使 DIV 100% 成为其父级。出于这个原因,您需要html, body {height: 100%; min-height: 100%}
按照 Marko 的说明进行操作,而且,对 . 的每个父 DIV 进行相同的更改#menu
。
因为您有一个底部边框,所以将右边框应用于父 DIV,height: 100%;
并将底部边框应用于#menu
您希望底部边框显示的任何高度。
至少有两种方法可以解决这个问题。
解决方案1:
如果您可以使用绝对定位元素,则可以使用top
andbottom
属性而不是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%;
}
100% 高度是指父容器的高度。为了让你的 div 达到身体的全高,你必须设置这个:
html, body {height: 100%; min-height: 100%}
希望能帮助到你。
我对我的大部分垂直元素使用这个 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 行。
<!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>
我已经min-height: 100vh;
在我的一些项目上取得了巨大的成功。见例子。
当我对此进行测试时,我尝试使用 position 属性并且效果很好。
HTML
<div class="main">
<div class="body">
//add content here
</body>
</div>
CSS
.main{
position: relative;
}
.body{
position: absolute;
height: 100%;
}