javascript - tooltips - tooltip bootstrap css

Bootstrap 3 div enrollable para mesa

Question

Estoy usando Bootstrap 3 con una barra de navegación en la parte superior y una página que muestra una tabla formateada utilizando la clase de tabla de Bootstrap 3. Me gustaría que la tabla (que se encuentra en su propia div) sea la única parte de la página que se puede desplazar (cuando el ancho / alto de los datos en la tabla excede el de la página) He diseñado el div para la tabla de la siguiente manera:

.mygrid-wrapper-div {
    overflow: scroll;
    height: 200px;
}

Tengo un violín que ilustra esto, y agregué un borde rojo feo de 5px alrededor del div para resaltar el área que me gustaría tener desplazable:

http://jsfiddle.net/4NB2N/4/

Observe que el desplazamiento de izquierda a derecha funciona muy bien. No tuve que hacer nada para que esto funcionara, y el div ajusta la barra de desplazamiento automáticamente cuando la ventana también cambia de tamaño. Sin embargo, no sé cómo configurar la altura del div para que se comporte de la misma manera: codifiqué el valor de 200px pero realmente me gustaría que el div llenara el "resto" de la ventana para que cuando se cambie el tamaño del navegador todavía funcione .

¿Cómo puedo hacer que el div se comporte igual tanto horizontal como verticalmente?

Answer 1

Bueno, una forma de hacerlo es establecer la altura de su cuerpo a la height que desea que tenga su page . En este ejemplo hice 600px .

Luego, establezca la altura de la wrapper en un porcentaje del cuerpo aquí. Lo hice 70% Esto ajustará su tabla para que no llene toda la pantalla, pero en su lugar solo ocupa un porcentaje de la altura de página especificada.

body {
   padding-top: 70px;
   border:1px solid black;
   height:600px;
}

.mygrid-wrapper-div {
   border: solid red 5px;
   overflow: scroll;
   height: 70%;
}

http://jsfiddle.net/4NB2N/7/

Actualización ¿Qué tal un enfoque 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/

Answer 2

También puede usar style = "overflow-y: scroll; altura: 150px; width: auto;" Me funciona

Answer 3

Un desplazamiento proviene de un cuadro con clase pre-scrollable

<div class="pre-scrollable"></div>

Hay más ejemplos: http://getbootstrap.com/css/#code-block
Deseo que ayude.