-1

I would like to have a div which should fill the whole screen width and height. Inside that div I want to add several other div not knowing however how many exactly (could be 3 but could also be 40). Is it possible using only CSS techniques to make these divs fill out the whole width and height of the surrounding div? So when there are only four divs they would need to be much larger than if there were 40 divs. I tried achieving this effect using Flexbox, but I didn´t succeeded.

Chris
  • 6,093
  • 11
  • 42
  • 55

4 Answers4

0

Check out this Demo

HTML:

<div id="wrap">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
</div>

CSS:

#wrap {
position:absolute;
border:1px solid black;
height:100%;
width:100%;
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}

.inner {
position:realtive;
border:1px solid red;
background-color:silver;
height:100%;
width:20%;
}

The tricky part here is setting the width of .inner elements.
Since it is in percentage, so what you should do is divide 100 by number of .inner elements.
Here there are 4 .inner elements so 100%/4 = 25%.This 25% will be your width of .inner elements.
But I have set the width to 20%,why? Because of the justify-content:space-around; and flex-flow:row wrap; properties of #wrap element.
If I set the width of .inner elements to 25%, one element will wrap to the bottom.
You should be able to detect the nearest value, in which the .inner elements donot wrap to the bottom, by yourself.In this case the nearest value of width was 20%.

UmairKhan
  • 108
  • 1
  • 10
  • Thank you but this won´t work if the number of .inner elements is not fixed but can vary, am I wrong? – Chris Aug 06 '14 at 21:48
  • You can add as many no. of .inner elements as you want.But if you increase or decrease the no. of .inner elements then you will have to change the width of .inner elements.And I have explained the procedure of changing the width of .inner elements in the last section of my answer. – UmairKhan Aug 06 '14 at 21:52
  • @UmairKhan, I think the OP is trying to build the page to handle a dynamic number of `.inner` elements – JRulle Aug 07 '14 at 12:34
0

Try this (DEMO that appends a random # of DIVs to the BODY then sizes them as a percentage):

CSS:

html, body {
  height: 100%;
  min-height: 100%;
}
body { 
  position: relative; 
  margin: 0; 
  paddding: 0; 
}
div { 
  width: 100%; 
  position: relative; 
}

JQuery:

$('div').css("height",(100/$('div').length) + "%");
// this sets the heights to equal percentages
JRulle
  • 7,448
  • 6
  • 39
  • 61
0

This is the solution I found for my question: Filling space with Flexbox

Chris
  • 6,093
  • 11
  • 42
  • 55
0

Pure CSS3 Solution: DEMO

(this involves using a lot of individual style rules - 40 if your maximum number of DIVs is 40)

html, body { height: 100%; min-height: 100%; }
body { position: relative; margin: 0; paddding: 0; }
div.inner { width: 100%; position: relative; }
// this is where the CSS3 magic happens - these selectors can catch for an individual 
// case in regards to the count of items on the page
/* one item */
div.inner:first-child:nth-last-child(1) { height: 100%; }
/* two items */
div.inner:first-child:nth-last-child(2), div.inner:first-child:nth-last-child(2) ~ div.inner { height: 50%; }
/* three items */
div.inner:first-child:nth-last-child(3), div.inner:first-child:nth-last-child(3) ~ div.inner { height: 33.3333%; }
//...and so on up until your desired maximum of items...

Reference

Supported in IE9+

Community
  • 1
  • 1
JRulle
  • 7,448
  • 6
  • 39
  • 61