Fill in the page with rectangles according to their number.
I want to display some divs on my page based on this behavior:
Depending on the number of divs, they will take up the page size until there are 8 of them, then in 9+ they will keep their size and the page will become scrollable.
I've been thinking about using flexboxes such as this , but haven't been able to achieve exactly the expected behavior.
So, I started putting a class with JS called "one" if there is one element, "two" for two elements, etc., and then with this css (LESS):
.container.one {
div:nth-child(1) {
width: 100%;
height: 100%;
}
}
.container.two {
div:nth-child(1) {
width: 100%;
height: 75%;
}
div:nth-child(2) {
width: 100%;
height: 25%;
}
}
etc .. up to 8.
This works fine, but any better idea more concise would be welcome.
source to share
Divas are filled from the bottom thanks to:
-
display: table
on<body>
-
display: table-cell
andvertical-align: bottom
on<div class="wrap">
Check by adding and removing div.
div:last-child:nth-child(odd)
- magic sauce to spread the last odd div 100%.
Html
<div class="wrap">
<div><div>
<-- ... -->
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
body {
display: table;
width: 100%;
}
.wrap {
display: table-cell;
vertical-align: bottom;
width: 100%;
height: 100%;
}
.wrap div {
border: solid 1px #CCC;
float: left;
width: 50%;
height: 25%;
}
.wrap div:last-child:nth-child(odd) {
width: 100%;
}
source to share