0

Buenas, me encuentro con el siguiente problema. No puedo configurar la altura de mi card-body a mi gusto.

Tengo un div card-body dentro de un div card, dentro de un section content que a su vez esta dentro de un div content-wrapper principal. Estoy usando Bootstrap y AdminLTE 3.0

Como pueden ver en el div content-wrapper puse el estilo style="height: 100%;", probe eso, tanto en ese elemento como en otros, usando min-height y max-height, usando px y vh pero no cambia nada.

Me gustaria que por defecto, el card-body utilizara el 100% de la altura del monitor. Muchas gracias

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="height: 100%;">
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Remitos<small> - Viejo Almacén</small></h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">

                    <li class="breadcrumb-item"><i class="far fa-id-card"></i></li>
                    <li class="breadcrumb-item active">Remitos</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content" style="min-height: 100%">

    <!-- Default box -->
    <div class="card" >
       
        <div class="card-body ">
            
                
        <!-- /.card-body -->
        </div>

        <div class="card-footer">
        
        </div>
                
        <!-- /.card-footer-->
    </div>
    <!-- /.card -->

</section>
<!-- /.content -->

Adjunto imágenes de lo que actualmente veo en el sistema.

Card-Body

Section Content

1 respuesta 1

2

No tiene mucho sentido, ya que esa acción desplazaría todo el contenido hacia abajo de la barra de tareas, pero las solución es usar style="height: 100vh;".

Primero, debes eliminar el estilo style="height: 100%;" del div class="content-wrapper" y el style="min-height: 100%" del section class="content".

Luego, empiezas a descartar agregando style="height: 100vh;" en div class="card-body". Si no es lo que buscas, mueves el estilo a un div superior a la vez.

1
  • Si, tal cual. Hace un min respondi cualquier verdura porque me confundi de pregunta, pero tenes razon. Como nadie respondio ayer terminé solucionando exactamente como lo decis vos, con style="height: 100vh;" pero así y todo no me gusta como se ve en algunas resoluciones. Creo que voy a tener que hacer lo mismo que hice con el menu lateral, reacomodarle el tamaño una vez que la pagina se cargue por completo, mediante jquery, porque toma un tamaño inicial que la plantilla (adminLTE) cambia en tiempo de ejecucion
    – Agustin G.
    Commented el 6 feb. 2020 a las 15:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.