Flexible custom layout with CSS (maybe JS if necessary)

Question

According to the attached image. I am trying to make a <ul> that contains several elements. However, I want the first five elements to always fill the height of the viewport, and if there are more than five elements, I need the rest to have the same height as the first five <li> .

According to number 4, the image can have a nested <ul> , which can fill a width that has several <li> .

The text inside the entire <li> should be vertically centered and multi-line, while maintaining the same height as other elements.

NOTE. Any other lis under the crease should have the same height as the initial first fifth. (Even if there are less than five elements in the beginning, they should not fill the full height. Only when there are five of them do they complete the full height of the page.

Any help is much appreciated! My previous question was not filled out, and I missed some clarifications: Elements of vertical extension. I use only the CSS solution (at the moment), which does not work as needed.

Thanks.

Used code:

 ul.navigation { list-style-type: none; margin: 0; padding: 0; display: table; width: 100%; height: 100%; } ul.navigation li { display: table-row; } ul.navigation li a { font-size:1.8em; display: table-cell; vertical-align: middle; padding: 1em 1.1em; text-transform: uppercase; color: white; text-decoration: none; } 

Answer 1

As for heights, one approach would be to use the vh keyword, which is 1% of the viewport height. It is valid only in IE9, but since I assume this is a mobile screenshot, you should be fine.

You should also consider using flexbox, which works great on mobile browsers, and it allows you to vertically center without display:table mess.

 ul{ display:flex; flex-direction: column; margin: 0; padding: 0; height: 100vh; border: 1px solid red; width:24em; } li{ display:flex; flex-direction: row; justify-content:space-around; align-items:center; } li > div { flex-grow:1; flex-shrink:1; max-width: 50%; display:flex; flex-direction: column; justify-content: center; align-items: center; } li:nth-child(even){ background: gray; } ul > li { height: 20vh; } 

Here's the double: http://result.dabblet.com/gist/78afacb7e747b7e24e62/ba0f81dc9278ec743c58027e995a0f6c381329b8

http://dabblet.com/gist/78afacb7e747b7e24e62

Answer 2

maybe something like this might point you in the direction: http://jsfiddle.net/swm53ran/10/

HTML

 <div class="container"> <div class="section">My content here</div> <div class="section">My content here</div> <div class="section">My content here</div> <div class="section"> <div class="sub-section">Half Content</div> <div class="sub-section" style="margin-left:-4px;">Half Content</div> (EDITED) </div> <div class="section">My content here</div> </div> 

CSS

 .section { height: 20vh; background-color: lightgray; display: block; } .sub-section { width: 50% display: inline-block; } 

EDIT: new fiddle http://jsfiddle.net/swm53ran/11/ compliments the ideas of the Holodstar

Answer 3

I went for "calculate height using js" instead of vh. I think vh is more elegant, but if you need extra support, you will have to use js.

http://jsbin.com/huroqiliba/1/edit?html,css,js,output

I use flexbox to vertically center text and columns. flexbox has pretty solid support at this point. http://caniuse.com/#feat=flexbox

Answer 4

I am going to use vh and flexbox in this solution to avoid js execution. If you need to support older browsers, consider using pollyfill, for example: https://github.com/saabi/vminpoly and https://github.com/doctyper/flexie , which work very well with Modernizr.

HTML

  <ul class="navigation"> <li class="one"><a href="#">One</a></li> <li class="two"><a href="#">Two<br> Overflow: hidden keeps this long li at an equal height, but obviously be smart about this and don't cut off your content with a huge font size or long text.</a></li> <li class="three"><a href="#">Three</a></li> <ul> <li class="four-a"><a href="#">Four and</a></li><li class="four-b"><a href="#">a Half</a></li></ul><li class="five"><a href="#">Five</a></li> <li class="fold"><a href="#">Fold</a></li> <li class="fold"><a href="#">Fold</a></li> <li class="fold"><a href="#">Fold</a></li> </ul> 

CSS

 ul.navigation, ul.navigation ul { list-style-type: none; margin: 0; padding: 0; display: block; width: 100%; height: 100%; } ul.navigation ul li { display:inline-flex; width:50%; } ul.navigation ul{ display:flex; } ul.navigation li a { font-size:1.8em; display: block; padding: 1em 1.1em; text-transform: uppercase; color: white; text-decoration: none; } ul.navigation li{ overflow: hidden; height: 20vh; display: flex; align-items: center; justify-content: center; } .one {background-color:lightgray;} .two {background-color:tomato;} .three {background-color:palegreen;} .four-a {background-color:indianred;} .four-b {background-color:palevioletred;} .five {background-color:papayawhip;} .fold{background-color:black;} 

Here is my code: http://codepen.io/fontophilic/pen/yyVNQd?editors=110