全高div

Question

我想知道是否有办法用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 Fiddle example

以下是我使用的当前方法：绝对定位。

并非每个盒子宽度都适合自举。 （实际上我在bootstrap中每个col都有一个）

.line{
    background-image: linear-gradient(red 0%, blue 100%);
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.33333%;
}

Current Method JS Fiddle

Answer 1

您可以使用vh（当前视口）

<强> CSS

.line{
    background-image: linear-gradient(red 0%, blue 100%);
    width: 1px;
    margin-right: -1px;
    float: left;
    height: 80vh; /*Full screen Height*/
}

<强> DEMO HERE

Answer 2

我不确定您的问题，但请尝试以下代码？

   .content{
     background-color: red; // color was for the test
     height: 100%;
     padding: 3px;
}

Answer 3

body { margin:0; /* This is used to reset any browser-default margins */ }

div {
    height:100vh;
    background:#f00;
    color:#fff;
}

这适用于div希望这有帮助..

Answer 4

  

.line必须是容器的整个高度，而不是固定的高度。这基本上就是一切。我将用一个工作示例编辑我的帖子。 - AlexG 5月5日9:26

您当前的绝对定位方法已经这样做了。 .line是.row高度的100％。我想你要求.line的高度取.panel-body的全高。如果这是正确的假设，您只需将position:relative;从.row移至.panel-body（请参阅代码段）。

<强>段

.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>