Equal div and 100% bootstrap height

Question

I am trying to make a page with 5 DIVs.
The plan is to put one photo in the center DIV and a link in each of the other 4 using Bootstrap 3.

Required Result:

Code so far:

.container-fluid2 { min-height: 100%; overflow: hidden; background-color: black; } .levogore5 { height: 50%; min-height: 50%; margin-bottom: -22%; padding-bottom: 22%; min-width: 25%; max-width: 100%; background-color: lime; vertical-align: top; } .levodole5 { height: 50%; min-height: 50%; margin-bottom: -25%; padding-bottom: 25%; min-width: 25%; max-width: 100%; background-color: green; vertical-align: baseline; margin-top: 22%; } .centar5 { height: 100%; min-height: 100%; min-width: 50%; max-width: 100%; background-color: red; margin-bottom: -50%; padding-bottom: 50%; overflow: hidden; } .desnogore5 { height: 50%; min-height: 50%; margin-bottom: -22%; padding-bottom: 22%; min-width: 25%; max-width: 100%; background-color: aqua; vertical-align: top; } .desnodole5 { height: 50%; min-height: 50%; margin-bottom: -25%; padding-bottom: 25%; min-width: 25%; max-width: 100%; background-color: blue; vertical-align: baseline; float: right; margin-top: 22%; } 

 <div class="container-fluid2"> <div class="row"> <div class="col-sm-3 levogore5">levo gore</div> <div class="col-sm-5 col-sm-5 span2 centar5">centralni</div> <div class="col-sm-3 desnogore5">desno gore</div> </div> <div class="row"> <div class="col-sm-3 levodole5">levo dole</div> <div class="col-sm-3 desnodole5">desno dole</div> </div> </div> 

I think I read all the existing questions and answers here. I tried html/body 100% , max-height , container-fluid , -9999px , but they did not work.

I forgot to mention, responsiveness is critical, and in my example, these float: right (in css for the last DIV) make a very big mess on smaller screens.

My idea is to use bootstrap to have fewer problems with smaller screens, and in simpler pages bootstrap just creates a bunch of horizontal DIVs, so I hope something like this

Answer 1

Responsive example without changing the bootstrap grid (Extra points, because you should not change the grid or you will not be able to use it in each scenario)

I had to change your html and add some classes:

 <div class="container-fluid container-table"> <div class="row inline-row"> <!-- I'm using three columns and nesting aqua and blue under the 1st column --> <div class="col-xs-12 col-sm-3"> <div class="row"> <div class="col-xs-12 aqua"></div> <div class="col-xs-12 blue"></div> </div> </div> <div class="col-xs-12 col-sm-6 yellow"></div> <!-- Nesting greenyellow and green --> <div class="col-xs-12 col-sm-3"> <div class="row"> <div class="col-xs-12 greenyellow"></div> <div class="col-xs-12 green"></div> </div> </div> </div> </div> 

And CSS:

 /* Colors */ .aqua{ background-color:aqua; } .blue{ background-color:blue; } .yellow{ background-color:yellow; } .greenyellow{ background-color:greenyellow; } .green{ background-color:green; } /* Height 100% to all the elements */ html, body, .container-table, .inline-row, .inline-row > div { height: 100%; } /* We do the trick here with Table, table row and table-cell */ .container-table { display: table; width: 100%; /* Width is important for display:table */ } .inline-row { display: table-row; } .inline-row > div { display: table-cell; } /* This will set our heights as we need them */ .inline-row > div > .row { height: 100%; } .inline-row > div .row > div { height: 50%; } 

EDIT: Changed the right and left grid to 25% of the width.

My JsFiddle Live example

Answer 2

This is a great example of how to use flex box !

It seems to me that you are approaching this example. I think a column based approach is more appropriate.

When I create a site, I like trying to break it into squares or rectangles that extend the entire width or height of the page.

In my opinion, this project has 1 rectangle extending across the width of the page, which contains 3 rectangles intersecting the height of the page, and then several smaller rectangles in each of them.

 body { margin: 0; padding: 0; } .column > div { border: 1px solid blue; min-height: 150px; } @media (min-width: 600px) { .row { display: flex; flex-direction: row; min-height: 100vh; } .row > div { flex-basis: 25%; } .row > div.main { flex-basis: 50%; } .column { display: flex; flex-direction: column; } .column > div { flex-basis: 50%; } .column.main > div { flex-basis: 100%; } } 

 <div class="row"> <div class="column"> <div>Div width 25% height 50%</div> <div>Div width 25% height 50%</div> </div> <div class="column main"> <div>Div width 50% height 100%</div> </div> <div class="column"> <div>Div width 25% height 50%</div> <div>Div width 25% height 50%</div> </div> </div> 

Answer 3

Fiddle

In short, you make 6 boxes.
You also do not need a gasket between them?

If so, just add to your CSS:

 [class*='col-'] { padding-right:0; padding-left:0; } 

HTML:

 <div class="container-fluid2"> <div class="row"> <div class='col-sm-3'> <div class="bg-color-red">left 3</div> <div class="bg-color-green">left 3</div> </div> <div class="col-sm-6 bg-color-green"> <div class="bg-color-green">central 6</div> <div class="bg-color-green">central 6</div> </div> <div class='col-sm-3'> <div class="bg-color-red">right 3</div> <div class="bg-color-green">right 3</div> </div> </div> </div> 

CSS:
Bootstrap. See the violin.

Answer 4

I gave you the code below, which will work from the smallest desktop to the largest (desktop computer in all cases) using bootstrap. As you said, you like a pile when it comes to a mobile phone, then just don't write col-sm-* classes and @media query

 .height-50{ height : 480px; } .height-100{ height : 960px; } .container-fluid div{ border : 1px solid black; } @media (min-width: 576px) { .height-50{ height : 230px; } .height-100{ height : 460px; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> <div class="container-fluid"> <div class="col-lg-3 col-sm-3"> <div class="row"> <div class="col-lg-12 col-sm-12 height-50" style="background-color : lightgray"> Width : 25%;<br>Height : 50%; </div> <div class="col-lg-12 col-sm-12 height-50" style="background-color : #9898e7"> Width : 25%;<br>Height : 50%; </div> </div> </div> <div class="col-lg-6 col-sm-6"> <div class="row"> <div class="col-lg-12 col-sm-12 height-100" style="background-color : yellow"> Width : 50%;<br>Height : 100%; </div> </div> </div> <div class="col-lg-3 col-sm-3"> <div class="row"> <div class="col-lg-12 col-sm-12 height-50" style="background-color : yellowgreen"> Width : 25%;<br>Height : 50%; </div> <div class="col-lg-12 col-sm-12 height-50" style="background-color : green"> Width : 25%;<br>Height : 50%; </div> </div> </div> </div>