How to put a container-fluid that occupies 100% of the pag

Question

How to put a container-fluid that occupies 100% of the pag

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I have a problem, I want to place a container-fluid occupies 100% of the page so you can place inside a container to place it in the center.

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

Here the code, I could "Solve" but as expected when entering from another device this is not responsive so I do not know how to do it, some help, too

html5 html css3 css bootstrap

asked by Victor Escalona 06.04.2018 в 05:06

source

2 answers

1

Hello, you seem to be using bootstrap. look at this Jsfiddle Full height

may be helpful

.fluid-container {
    height:100%;
}

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

answered by 06.04.2018 в 05:24

GroupBy Data Validation How to upload image to the local server externally?

score 0 · Accepted Answer

It is enough to put 100% of height to the "container-fluid" and its "containers", in this case, the html and body element:

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>