Q:Full height div |
Q:全高度的div |
I would like to know if there is a way to create a full height div with css.
I've tried absolute positioning, but that is not as flexible as I would like to have it, but it is my current method.
Flex boxes are not a option because of compatibility reasons.
.line{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
margin-right: -1px;
float: left;
height: 100px; /*Fixed height at the moment*/
}
JS Fiddle example
Here is the current method I'm using: absolute positioning.
Not every box width is fitting for bootstrap. (I actually have one for every col in bootstrap)
.line{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
position: absolute;
top: 0;
bottom: 0;
left: 33.33333%;
}
Current Method JS Fiddle |
我想知道是否有一种方法可以用CSS创建一个完整的高度的div。
我尝试过绝对定位,但这并不像我想要的那样灵活,但它是我目前的方法。
由于兼容性原因,Flex框不是一个选项。
.line{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
margin-right: -1px;
float: left;
height: 100px; /*Fixed height at the moment*/
}
JS提琴的例子
这里是我目前使用的方法:绝对定位。
不是每个框的宽度是适合引导。(我真的有一个在引导每一列)
.line{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
position: absolute;
top: 0;
bottom: 0;
left: 33.33333%;
}
电流法JS的小提琴 |
answer1: |
回答1: |
You can use vh (current viewport)
CSS
.line{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
margin-right: -1px;
float: left;
height: 80vh; /*Full screen Height*/
}
DEMO HERE |
你可以使用VH(当前视口)
CSS
.line{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
margin-right: -1px;
float: left;
height: 80vh; /*Full screen Height*/
}
在这里演示 |
answer2: |
回答2: |
body { margin:0; /* This is used to reset any browser-default margins */ }
div {
height:100vh;
background:#f00;
color:#fff;
}
This is applied to div hope this helps.. |
body { margin:0; /* This is used to reset any browser-default margins */ }
div {
height:100vh;
background:#f00;
color:#fff;
}
这是应用于div希望这有助于.. |
answer3: |
回答3: |
I am not sure to understand your problem but try the following code ?
.content{
background-color: red; // color was for the test
height: 100%;
padding: 3px;
}
|
我不知道你的问题,但尝试下面的代码?
.content{
background-color: red; // color was for the test
height: 100%;
padding: 3px;
}
|
answer4: |
回答4: |
The .line has to be the full height of the container, instead of a fixed height. That is basically everything. I'll edit my post with a working example. – AlexG May 5 at 9:26
Your current absolute positioning method already does this. .line is 100% of .row's height. I think you are asking for the height of .line to take the full height of .panel-body. If that is a correct assumption, you just need to move position:relative; from .row to .panel-body (See Snippet).
Snippet
.panel-body {
position:relative;
}
.line1{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
position: absolute;
top: 0;
bottom: 0;
left: 33.33333%;
}
.line2{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
position: absolute;
top: 0;
bottom: 0;
left: 66.66666%;
}
.content{
background-color: #EDFBFF;
height: 100px;
padding: 3px;
}
.container{
margin-top: 20px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Full height div</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4">
<div class="content" style="height: 150px;">line should fill 100% of the height automatically</div>
</div>
<div class="line1"></div>
<div class="col-xs-4">
<div class="content" style="height: 200px;">absolute positioning is unpractical, but my current solution with "left: 50%;" for example. </div>
</div>
<div class="line2"></div>
<div class="col-xs-4">
<div class="content" style="height: 300px;">flex is also not an option for compatibility reasons</div>
</div>
</div>
</div>
</div>
</div>
|
该行必须是容器的全部高度,而不是固定高度。基本上就是一切。我将用一个工作例子来编辑我的文章。 – AlexG May 5 at 9:26
您当前的绝对定位方法已经这样做了。行是行高度的100%。我想你要求的是高度,线要取车身面板的全部高度。如果这是一个正确的假设,你只需要移动位置:相对;从排板体(见段)。
Snippet
.panel-body {
position:relative;
}
.line1{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
position: absolute;
top: 0;
bottom: 0;
left: 33.33333%;
}
.line2{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
position: absolute;
top: 0;
bottom: 0;
left: 66.66666%;
}
.content{
background-color: #EDFBFF;
height: 100px;
padding: 3px;
}
.container{
margin-top: 20px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">全高度的div</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4">
<div class="content" style="height: 150px;">line should fill 100% of the height automatically</div>
</div>
<div class="line1"></div>
<div class="col-xs-4">
<div class="content" style="height: 200px;">absolute positioning is unpractical, but my current solution with "left: 50%;" for example. </div>
</div>
<div class="line2"></div>
<div class="col-xs-4">
<div class="content" style="height: 300px;">flex is also not an option for compatibility reasons</div>
</div>
</div>
</div>
</div>
</div>
|
html
css
twitter-bootstrap
height
|
|