找到你要的答案

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 
京ICP备15019141号-2