Html 如何在 css 中创建 100% 垂直线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13221416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create 100% vertical line in css
提问by user1493448
I want to create a vertical line that cover whole page like this
我想像这样创建一条覆盖整个页面的垂直线
here is my code
这是我的代码
#menu
{
border-left: 1px solid black;
height: 100%;
}
result show like this
结果显示如下
采纳答案by Matt Olan
As bookcasey said, height: 100%;will only make the DIV 100% of its parent. For this reason you will need to make html, body {height: 100%; min-height: 100%}as stated by Marko, but also, make the same change on every parent DIV of #menu.
正如 bookcasey 所说，height: 100%;只会使 DIV 成为其父级的 100%。出于这个原因，您需要html, body {height: 100%; min-height: 100%}按照 Marko 的说明进行，但也需要对#menu.
Because you have a bottom border, then apply the right border to the parent DIV at height: 100%;and apply the bottom-border to your #menuat whatever height you want the bottom border to show up.
因为你有一个底部边框，然后将右边框应用于父 DIVheight: 100%;并将底部边框应用于#menu你希望底部边框显示的任何高度。
回答by bookcasey
回答by Christofer Eliasson
There are at least two ways to solve this.
至少有两种方法可以解决这个问题。
Solution 1:
解决方案1：
If you are okay with using an absolutely positioned element, you can use the topand bottomproperties instead of height. By setting both topand bottomto 0you force the element into taking up full height.
如果您可以使用绝对定位元素，则可以使用top和bottom属性代替height。通过同时设置top和bottom来0强制元素占据全高。
#menu
{
position: absolute;
border-right: 1px solid black;
top: 0;
bottom: 0;
}?
Solution 2:
解决方案2：
Another way would be to force the HTML and BODY elements into a 100% height, to give room for a menu with 100% height:
另一种方法是将 HTML 和 BODY 元素强制设置为 100% 高度，以便为具有 100% 高度的菜单留出空间：
body, html { height: 100%; }
#menu
{
border-right: 1px solid black;
height: 100%;
}?
回答by Marko Francekovic
100% height refers to the height of the parent container. In order for your div to go full height of the body you have to set this:
100% 高度是指父容器的高度。为了让你的 div 达到身体的全高，你必须设置：
html, body {height: 100%; min-height: 100%}
Hope it helps.
希望能帮助到你。
回答by Joe
I use this css positioning for most of my vertical elements:
我将这个 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>
Change the height and width to fit the page, or to make a horizontal line swap the height to width:
更改高度和宽度以适合页面，或使水平线将高度与宽度交换：
<div class="vertical-line" style="height: 250px;
width: 1px;
<div class="vertical-line" style="width: 250px;
height: 1px;
instead of a standard html line.
而不是标准的 html 行。
回答by ramya gurrala
<!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>
回答by Bj?rn Stenfeldt
I've used min-height: 100vh;with great success on some of my projects. See example.
我已经min-height: 100vh;在我的一些项目中取得了巨大的成功。参见示例。
回答by Nicole Pauline De Guzman
When I tested this, I tried using the position property and it worked perfectly.
当我测试这个时，我尝试使用 position 属性并且它工作得很好。
HTML
HTML
<div class="main">
<div class="body">
//add content here
</body>
</div>
CSS
CSS
.main{
position: relative;
}
.body{
position: absolute;
height: 100%;
}
