我在使用高度时感到困惑:100%,内容设置为25%25%25%25%为什么它不起作用(在我的浏览器中,每个div看起来都很小,100%没有填满整页)。谁能在这里找到我的错?
我的HTML代码:
<div class="container-fluid" style="height: 100%">
<div class="row" style="height: 25%;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row" style="height: 25%;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row" style="height: 25%;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
<h1 class="h1Title">Azkaban</h1>
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row" style="height: 50%;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
</div>
我已阅读:How can I make Bootstrap columns all the same height?
但我仍然不明白为什么100% - &gt; 25%的每个div不在这里工作?
答案 0 :(得分:5)
.container-fluid {
height: 100vh;
}
.row .col-xs-4.col-md-4 {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" style="height:25vh;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row" style="height:25vh;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row" style="height:25vh;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
<h1 class="h1Title">Azkaban</h1>
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row" style="height:25vh;">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
</div>
答案 1 :(得分:4)
使用%
html,
body,
.container-fluid {
height: 100%;
}
.row {
height: 25%;
}
.row > div {
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
<h1 class="h1Title">Azkaban</h1>
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
</div>
使用vh
.row {
height: 25vh;
}
.row > div {
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
<h1 class="h1Title">Azkaban</h1>
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4" style="background-color:red;">
.col-xs-9 .col-md-7
</div>
<div class="col-xs-4 col-md-4" style="background-color:yellow;">
.col-xs-3 .col-md-5
</div>
<div class="col-xs-4 col-md-4" style="background-color:lavender;">
.col-xs-3 .col-md-5
</div>
</div>
</div>
答案 2 :(得分:2)
添加此css:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
希望这会有效但从行中删除高度。但是,如果您使用高度作为“VH”Safari浏览器将不支持此。
这个here
已经有了小提琴