Tengo un angular de la aplicación que utiliza bootstrap 4. Tengo una barra de navegación que se pega a la parte superior, y quiero agregar el contenido que llena el espacio restante en el navegador. Aparte de la barra de navegación en la parte superior, tengo otro div que contiene el encabezado y pie de página de contenido. Entre el encabezado y pie de página, tengo una sección de contenido principal, y quiero que la sección (#two en mi ejemplo a continuación) para llenar todo el espacio vacío.

Pensé que podría usar css flexbox para lograr esto, pero mi simple no bootstrap flexbox ejemplo parecía no hacer nada cuando me movía en el bootstrap mundo. Yo estaba usando estos docs a intentar averiguarlo.

Pensé utilizando align-self-stretch debe ayudar a lograr este objetivo, pero parece como la que contiene elementos que pueden ser de tamaño apenas lo suficientemente grande como para mantener a mi #outer contenido, por lo que no hay flexbox la expansión de hacer. He intentado ingenuamente sólo la adición de height:100% estilos a los divs que contienen sólo para intentar conseguir algo de estiramiento, pero que no parecía ayudar.

He creado este plunker ejemplo basa en @ZimSystem la respuesta. Su codeply ejemplo, parecía funcionar exactamente como yo quería, pero cuando traté de pieza de los cambios en mi simple angular código, el flex de estiramiento no sucedió. No estoy seguro de lo que estoy haciendo para romper en la conversión.

Cómo utilizar Bootstrap 4 flexbox para llenar de contenido disponibles?

Esta es la totalidad de la componente angular 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 recipiente de aplicación que muestra la barra de exploración y 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 obtener mi #two div, para que se expande para llenar el espacio, mientras que con mi #one y #three divs actuando como el contenido de los encabezados y pies de página anclado a la parte inferior y superior del área de contenido?

  • Cuando se utiliza por ciento para la altura, asegúrese de que todos los ascendientes, también tienen una altura, es decir, html, body { height: 100%; } …otra opción que nos utilización de la ventanilla del lugar de unidades, height: 100vh en el contenedor de aplicaciones
InformationsquelleAutor Chris Farmer | 2017-08-11

7 Comentarios

  1. 36

    Actualización De Bootstrap 4.1.0

    La flex-grow-1 y flex-fill clases están incluidas en Bootstrap 4.1.0

    Actualización De Bootstrap 4.0.0

    Agregar un flex-grow clase como esta:

    .flex-grow {
        flex: 1 0 auto;
    }

    Entonces, el clases de utilidad puede ser utilizado 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>

    https://www.codeply.com/go/3ZDkRAghGU

    • Gracias por el ejemplo. El suyo funciona como yo estaba buscando, pero me parece que han roto cuando se mueve en un simple angular del proyecto en plnkr.co/editar/TCMq9fI2XqtZNQ1S6OZQ?p=vista previa. Es cualquier cosa, obviamente, diferente de la suya? He editado mi post original para reflejar este plunker ejemplo.
  2. 5

    Su componente está envuelto en un <flex> elemento que necesita el mismo flexbox estilo para estirar verticalmente, permitiendo que el contenido de estirar con ella. Así que la adición de class="d-flex flex-column flex-grow" a la <flex> de trabajo. He aquí un trabajo de la horquilla de su plunker ejemplo.

  3. 3

    El problema, cuando se utiliza ZimSystem marcado en su Angulares plunker, es que el componente se inserta en el renderizado de HTML como un contenedor adicional con el flex etiqueta:

    <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>

    Con el fin de hacer que funcione como se pretende, se puede quitar el div externa de la pieza y el conjunto de las clases de flex en el componente del contenedor de host, como se muestra en la esta modificación de la plunker.

    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';  
        ...
    }
  4. 2

    Si usted no puede controlar la behavor de la clase que está utilizando. Simplemente quitar todos los de la misma y el uso de este css sólo.

    CSS:

    html,
    body,
    flex {
      height: 100%;
      margin: 0;
    }
    
    .outer {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .two {
      background-color: #123;
      flex-grow: 1;
      color: #FFF;
    }

    HTML:

    <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>

  5. 1
    .wrapper {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    
    .flex-grow {
      flex: 1;
    }

    Agregar un elemento contenedor que contiene los bloques de contenido, y aplicar la flex-grow de la clase a la que desea rellenar el espacio restante.

  6. 0

    CSS

    html, body {
      height: 100%;
    }
    
    .flex-grow {
      flex: 1;
    }

    flex.componentes.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:)

  7. 0

    Puede hacer que el componente de crecer hasta llenar su contenedor y, a continuación, tienen como una flexión de la columna así como el contenido también crecerá. Para hacer esto se utiliza :host para orientar el elemento del componente.

    flex.componente.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.

Dejar respuesta

Please enter your comment!
Please enter your name here