html - theme - Bootstrap: rellene el espacio vertical restante
input file bootstrap 3 (1)
Esta pregunta ya tiene una respuesta aquí:
Estoy tratando de diseñar este diseño usando bootstrap. Puse el logo y la barra de navegación, pero ahora tengo que insertar el div restante.
Necesito extender este div (con el signo de interrogación) al espacio restante de la página (con margen como la imagen).
No sé la altura del porcentaje del logo o navbar.
Editar: publicar mi código (página de origen de Yii Framework)
<a href="index.html"><img width="150" src="images/logo.png"/></a>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle btn btn-default" data-toggle="collapse" data-target="#yii_booster_collapse_yw0" id="yw1" name="yt0" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button></div>
<div class="collapse navbar-collapse" id="yii_booster_collapse_yw0">
<ul id="yw2" class="nav navbar-nav">
<li class="active">
<a href="index.php/site/home">Home</a>
</li>
</ul>
<ul class="pull-right nav navbar-nav" id="yw3">
<li>
<a href="index.php/user/profile/edit">Profile</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="index.php/site/home">Options <span class="caret"></span>
</a>
<ul id="yw4" class="dropdown-menu">
<li>
<a tabindex="-1" href="index.php/site/contact">Contact Us</a>
</li>
<li>
<a tabindex="-1" href="index.php/user/profile/changepassword">Change password</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="content">
fill vertical space
</div>
Necesito llenar el espacio restante, no el logo / problema de marca.
Verás en el CSS que utilicé calc () en el valor de height para hacer una resta.
Primero, obtenga la altura de la vista del tamaño de la pantalla del dispositivo usando 100vh luego restar la altura que se usa arriba del div que desea llenar para ocupar el resto de la pantalla.
Aquí está el Fiddle .
¿Esto ayuda?
PD: Comenté en tu código de navegación dónde tienes un div extra y dónde agregué un </li> .
.block {
height: -webkit-calc(100vh - 72px);
height: -moz-calc(100vh - 72px);
height: calc(100vh - 72px);
background-color: rgba(90,90,190,0.8);
}