Resposta de inicialização * vertical *
Sem delegar o gerenciamento de largura ao Bootstrap, posso obter três colunas de altura total
com o seguinte HTML / CSS.
<!DOCTYPE html>
<head>
<style>
div {
position: fixed;
border: 5px dashed blue;
box-sizing: border-box;
}
.left {
height: 100%; top: 0;
width: 33%; left: 0;
}
.middle {
height: 100%; top: 0;
width: 33%; left: 33%;
}
.right {
height: 100%; top: 0;
width: 34%; left: 66%;
}
h2.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="left">
<h2 class="text-center">Left</h2>
</div>
<div class="middle">
<h2 class="text-center">Middle</h2>
</div>
<div class="right">
<h2 class="text-center">Right</h2></div>
</div>
</body>
Para deixar o Bootstrap lidar com as larguras, escrevi
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
body {
min-height: 100%;
border: 3px solid green;
}
.fullheight {
min-height: 100%;
border: 3px solid blue;
/* position: absolute; */
}
</style>
</head>
<body>
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-xs-4 col-md-4">
<h2 class="text-center">Left</h2>
</div>
<div class="col-xs-4 col-md-4">
<h2 class="text-center">Middle</h2>
</div>
<div class="col-xs-4 col-md-4">
<h2 class="text-center">Right</h2>
</div>
</div>
</div>
</body>
Posição de comutação para absoluta não funciona em combinação com o Bootstrap e as outras discussões anteriores sobre esse problema (1, 2, 3, 4) Não ajuda.
Como defino a altura para 100% quando as larguras são gerenciadas pelo Bootstrap?
Se houver uma maneira do Bootstrap para definir DIVs para 100% de altura, isso seria ainda melhor.