css3 - que - bootstrap tutorial
Twitter bootstrap-Diseño fijo con barra lateral desplazable (2)
Encontré una manera de hacerlo. No estoy seguro de que sea lo mejor, pero cumple su función:
<html>
<head>
<link rel="stylesheet" media="screen" href="normalize.css">
<link rel="stylesheet" media="screen" href="bootstrap.min.css">
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
header contents
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="span8 scrollable">
<div class="pad40-top">
main contents
</div>
</div>
<div class="span4 scrollable">
<div class="pad40-top">
right sidebar contents
</div>
</div>
</div>
</div>
</body>
Estoy tratando de implementar un diseño simple de encabezado + 2 columnas usando Twitter bootstrap.
Tengo un encabezado fijo con 100% de ancho, y ahora estoy tratando de tener dos columnas de altura completa de ancho fijo con barras de desplazamiento independientes. ¿Hay alguna buena manera de hacer esto con Twitter bootstrap?
Aquí hay una foto del diseño que estoy tratando de construir.
Use la clase '' pre-desplazable '' de bootstrap en su div objetivo. Ajuste div a una altura máxima fija. Es estéticamente bueno, también.