css - grow - ¿Cómo usar el flexbox de Bootstrap 4 para llenar el contenido disponible?
flexbox school (7)
CSS
html, body {
height: 100%;
}
.flex-grow {
flex: 1;
}
flex.components.ts
//our root app component
import {Component, NgModule, VERSION} from ''@angular/core''
import { RouterOutlet, RouterModule } from ''@angular/router''
import {BrowserModule} from ''@angular/platform-browser''
@Component({
selector: ''flex'',
host: {''class'': ''flex-grow''},
template: `
<div id="outer" class="d-flex flex-column h-100 flex-grow">
<div id="one" class="">
header content
<br> another line
<br> And another
</div>
<div id="two" class="bg-info flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content
</div>
</div>
`
})
export class FlexComponent {
constructor() {}
}
Resultado: https://plnkr.co/edit/vQS7Jw58zmlVshz9YmQ8?p=preview Gracias :)
Tengo una aplicación angular que utiliza bootstrap 4. Tengo una barra de navegación que se adhiere a la parte superior y quiero agregar contenido que llene el espacio restante en el navegador. Aparte de la barra de navegación en la parte superior, tengo otro div que contiene contenido de encabezado y pie de página. Entre el encabezado y el pie de página, tengo una sección de contenido principal, y quiero que esa sección ( #two en mi ejemplo a continuación) llene todo el espacio vacío.
Pensé que podría usar css flexbox para lograr esto, pero mi ejemplo simple de flexbox sin bootstrap parecía no hacer nada cuando me mudé al mundo de bootstrap. Estaba usando estos documentos para tratar de resolver esto.
Pensé que el uso de align-self-stretch debería ayudar a lograr este objetivo, pero parece que los elementos que contienen pueden tener el tamaño suficiente para contener mi contenido #outer , por lo que no hay expansión de Flexbox por hacer. Intenté ingenuamente solo agregando height:100% estilos height:100% a los divs que contenían solo para intentar estirarme, pero eso no parecía ayudar.
Creé este ejemplo de plunker basado en la respuesta de @ZimSystem. Su ejemplo de código de código pareció funcionar exactamente como yo quería, pero cuando intenté incorporar los cambios en mi código angular simple, el estiramiento flexible no sucedió. No estoy seguro de lo que estoy haciendo para romperlo en la conversión.
Esta es la totalidad del componente angular que estoy viendo en este momento:
<div id="outer" class="d-flex flex-column flex-grow">
<div id="one" class="">
header content <br>
another line <br>
And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content
</div>
</div>
Y aquí está el contenedor de aplicaciones que muestra la barra de navegación y el punto de inyección:
<div class="d-flex flex-column h-100">
<nav class="navbar navbar-toggleable-md sticky-top bg-faded">
<a class="navbar-brand" href="#">
<h1 class="navbar-brand mb-0">My App</h1>
</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>
¿Cómo puedo hacer que mi #two div se expanda para llenar el espacio mientras mis #one y #three divs actúan como encabezados y pies de página de contenido anclados en la parte superior e inferior del área de contenido?
El problema, al usar el marcado de ZimSystem en su plunker angular, es que el componente se inserta en el HTML renderizado como un contenedor adicional con la etiqueta flex :
<div class="d-flex flex-column h-100">
<nav class="navbar navbar-toggleable-md sticky-top bg-faded">
...
</nav>
<router-outlet></router-outlet>
<flex>
<div id="outer" class="d-flex flex-column flex-grow">
...
</div>
</flex>
</div>
Para que funcione según lo previsto, puede quitar la división externa del componente y establecer las clases de flexión en el contenedor de host del componente, como se muestra en este plunker modificado .
import {Component, NgModule, HostBinding, VERSION} from ''@angular/core''
import { RouterOutlet, RouterModule } from ''@angular/router''
import {BrowserModule} from ''@angular/platform-browser''
@Component({
selector: ''flex'',
template: `
<div id="one" class="">
header content
<br> another line
<br> And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content
</div>
`
})
export class FlexComponent {
@HostBinding(''class'') classes = ''d-flex flex-column flex-grow'';
...
}
Puede hacer que el componente crezca para llenar su contenedor y luego tenerlo como una columna flexible para que el contenido también crezca. Para hacer esto use :host para apuntar el elemento componente.
flex.component.ts
@Component({
selector: ''flex'',
template: `
<div id="outer" class="d-flex flex-column flex-grow">
<div id="one" class="">
header content
<br> another line
<br> And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content
</div>
</div>
`,
styles: ['':host {flex: 1 0 auto; display: flex; flex-direction: column }'']
})
He actualizado el plunk .
Si no puede controlar el comportamiento de la clase que está utilizando. Simplemente elimínelo todo y use este css solamente.
html,
body,
flex {
height: 100%;
margin: 0;
}
.outer {
display: flex;
flex-direction: column;
height: 100%;
}
.two {
background-color: #123;
flex-grow: 1;
color: #FFF;
}
<flex>
<div class="outer">
<div class="one">
Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br> Hey. This is header. <br>
</div>
<div class="two">
Hey. This is body
</div>
<div class="three">
Hey. This is footer <br> Hey. This is footer <br>
</div>
</div>
</flex>
Su componente está envuelto en un elemento <flex> que también necesita el mismo estilo de flexbox para extenderse verticalmente, permitiendo que su contenido se extienda con él. Por lo tanto, agregar class="d-flex flex-column flex-grow" al <flex> funcionará. Aquí está una bifurcación de trabajo de su ejemplo plunker .
Actualizar Bootstrap 4.1.0
Las clases flex-grow-1 y flex-fill están incluidas en Bootstrap 4.1.0
Actualizar Bootstrap 4.0.0
Agrega una clase de flex-grow como esta:
.flex-grow {
flex: 1 0 auto;
}
Luego, las clases de utilidad se pueden usar para el resto del diseño:
<div class="d-flex flex-column h-100">
<nav class="navbar navbar-toggleable-md sticky-top bg-faded">
<a class="navbar-brand" href="#">
<h1 class="navbar-brand mb-0">My App</h1>
</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">Item 1</a></li>
</ul>
</nav>
<div id="outer" class="d-flex flex-column flex-grow">
<div id="one" class="">
header content
<br> another line
<br> And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content 40px height
</div>
</div>
</div>
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.flex-grow {
flex: 1;
}
Agregue un componente contenedor que contenga sus bloques de contenido y aplique la clase flex-grow a la que desea llenar el espacio restante.