Estou a usar o Bootstrap 3 com uma barra de navegação no topo e uma página que exibe uma tabela formatada usando a classe de tabela Bootstrap 3's. Gostaria que a tabela (que está sentada no seu próprio div) fosse a única parte da página que é deslocável (quando a largura/altura dos dados na tabela excede a da página). Estilizei o div para a mesa da seguinte forma:
.mygrid-wrapper-div {
overflow: scroll;
height: 200px;
}
Tenho um violino a ilustrar isto, e acrescentei uma borda vermelha feia de 5px à volta do mergulho para destacar a área que gostaria de ter deslocável:
[
][1][2].Note que a rolagem da esquerda para a direita funciona muito bem - eu não'não tenho de fazer nada para que isto funcione, e o div ajusta a barra de rolagem automaticamente quando a janela é redimensionada também. Contudo, não sei'não sei como configurar a altura do div'para me comportar da mesma maneira - codifiquei o valor de 200px mas gostaria realmente que o div preenchesse o "descanso" da janela para que quando o navegador for redimensionado ainda funcione.
Como posso fazer com que o div se comporte da mesma forma tanto horizontal como verticalmente?
Uma rolagem vem de uma caixa com a classe "pré-tornável".
<div class="pre-scrollable"></div>
Aí's mais exemplos: http://getbootstrap.com/css/#code-block
Desejo que ajude.
Bem, uma maneira de o fazer é colocar a altura do seu corpo à "altura" que deseja que seja a sua "página". Neste exemplo, fiz 600px
.
Em seguida, ajuste a altura do seu "embalador" para uma percentagem do corpo aqui eu fiz 70%
Isto irá ajustar a sua mesa de modo a não encher todo o ecrã, mas em vez disso apenas ocupar uma percentagem da altura da página especificada.
body {
padding-top: 70px;
border:1px solid black;
height:600px;
}
.mygrid-wrapper-div {
border: solid red 5px;
overflow: scroll;
height: 70%;
}
**Actualização*** Que tal uma abordagem jQuery.
$(function() {
var window_height = $(window).height(),
content_height = window_height - 200;
$('.mygrid-wrapper-div').height(content_height);
});
$( window ).resize(function() {
var window_height = $(window).height(),
content_height = window_height - 200;
$('.mygrid-wrapper-div').height(content_height);
});
http://jsfiddle.net/4NB2N/11/