我想知道是否有办法用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*/
}
以下是我使用的当前方法:绝对定位。
并非每个盒子宽度都适合自举。 (实际上我在bootstrap中每个col都有一个)
.line{
background-image: linear-gradient(red 0%, blue 100%);
width: 1px;
position: absolute;
top: 0;
bottom: 0;
left: 33.33333%;
}
答案 0 :(得分:0)
您可以使用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 强>
答案 1 :(得分:0)
我不确定您的问题,但请尝试以下代码?
.content{
background-color: red; // color was for the test
height: 100%;
padding: 3px;
}
答案 2 :(得分:0)
body { margin:0; /* This is used to reset any browser-default margins */ }
div {
height:100vh;
background:#f00;
color:#fff;
}
这适用于div希望这有帮助..
答案 3 :(得分:0)
.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>