2

Tengo un problema, quiero colocar que un container-fluid ocupe el 100% de la pagina para asi poder colocar dentro de el un container para colocarlo en el centro.

<div class="container-fluid bg-success" style = "height: 1000px"> <!-- Container total de la pagina -->
<div class="container"><!-- Container del formulario -->
    <div class="row">
        <div class="col-12 bg-warning d-flex justify-content-center">
             <form class="form-inline">
                  <div class="form-group pt-5 bg-danger">
                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="¡Que desea buscar?">
                     <button type="submit" class="btn btn-primary ml-2">Buscar</button>
                  </div>
            </form>
        </div>
    </div>
</div>

Aca el codigo, lo pude "Solucionar" pero como es de esperar al momento de ingresar desde otro dispositivo este no es responsive asi que no logro saber como poder hacerlo, alguna ayuda?, tambien

2 respuestas 2

1

Hola parece que utilizas bootstrap. mira este Jsfiddle Full height

quizás sea de ayuda

.fluid-container {
    height:100%;
}

.fill{
    width:100%;
    height:100%;
    min-height:100%;
    background-color:#990000;
    padding:10px;
    color:#efefef;
}

0

Basta con ponerle el 100% de altura al "container-fluid" y a sus "contenedores", en este caso, el elemento html y body:

html,
body,
.container-fluid {
  height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-success"> <!-- Container total de la pagina -->
<div class="container"><!-- Container del formulario -->
    <div class="row">
        <div class="col-12 bg-warning d-flex justify-content-center">
             <form class="form-inline">
                  <div class="form-group pt-5 bg-danger">
                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="¡Que desea buscar?">
                     <button type="submit" class="btn btn-primary ml-2">Buscar</button>
                  </div>
            </form>
        </div>
    </div>
</div>
</div>

Tu Respuesta

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

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