Estoy tratando de hacer el container-fluid y 2º row para estirar el resto de la altura, pero yo no podía encontrar una manera de hacerlo.

He tratado de establecer la align-items/align-self a stretch pero no funciona tampoco.

A continuación es mi código de estructura:

<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row"> <!-- I want this row height to filled the remaining height -->
        <widgets [widgets]="widgets" class="hing"></widgets>
        <div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine -->
            <template row-host></template>
        </div>
    </div>
</div>

Estoy usando Bootstrap 4 A6. Podría alguien me sugieren cómo hacer que el contenedor y la fila para estirar el resto de la altura?

OriginalEl autor user3130446 | 2017-02-13

1 Comentario

  1. 22

    Bootstrap 4.1.0 tiene una clase de utilidad para flex-grow que es lo que usted necesita para la fila para llenar el resto de altura. Usted puede agregar una costumbre «de relleno» de la clase para ello. Usted también tiene que asegurarse de que el recipiente está lleno de altura.

    El nombre de la clase en Bootstrap 4.1 es flex-grow-1

    html,body{
        height:100%;
    }
    
    .flex-fill {
        flex:1;
    }
    
    <div class="container-fluid d-flex h-100 flex-column">
        <!-- I want this container to stretch to the height of the parent -->
        <div class="row">
            <div class="col">
                <h5>Header</h5>
            </div>
        </div>
        <div class="row bg-light flex-fill d-flex justify-content-start">
            <!-- I want this row height to filled the remaining height -->
            <div class="col portlet-container portlet-dropzone">
                <!-- if row is not the right to stretch the remaining height, this column also fine -->
                Content
            </div>
        </div>
    </div>

    https://www.codeply.com/go/kIivt8N1rn


    Relacionados con: Bootstrap 4 filas anidados llenar padre que ha sido hecho para llenar la altura de la ventanilla del uso de flex-grow

    Solo una pregunta ¿por qué necesitamos align-items-stretch align-content-stretch tanto aquí?
    En realidad ninguno de los dos es necesario

    OriginalEl autor Zim

Dejar respuesta

Please enter your comment!
Please enter your name here