Flexible Custom Layout with CSS (possibly JS if needed)

Question

As per the attached image. I am trying to make a <ul> that contains multiple items. However, I want the first five items to always fill the viewport height and if there are more than five items I need the rest to have the same height as the first five <li>'s.

As per li number 4 in the image, there maybe be a nested <ul> that can fill the width having multiple <li>'s.

The text inside all <li>s needs to be vertically centered and supports multi-line while retaining the same height as the other elements.

NOTE: Any other lis below the fold need to have the same height as the initial first five. (Even if there are less than five elements at first, they shouldn't fill the full height. Only when there are five they complete the full page height.

Any help is greatly appreciated! My previous question was not full and I missed some explanations: Vertically Stretch List Items I am using the CSS only solution (for now) which doesn't work as needed.

Thanks. enter image description here

CODE Used:

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

would you be able to kindly post the code you have worked on thus far? — indubitablee
– indubitablee, Commented Dec 31, 2014 at 16:21
You also need to include what browsers you'll be supporting. vh and flexbox should an easy no-js solution if you can forget about IE. Also consider that this will look odd in a horizontal orientation. — fontophilic
– fontophilic, Commented Dec 31, 2014 at 16:27
@fontophilic This is for a phonegap application targeting modern mobile browsers. So iOS, Android and Windows Phone. (It's just portrait mode) — user1027620
– user1027620, Commented Dec 31, 2014 at 16:28
Part of the problem, which was posted in a separate question, was the issue of completely filling up the viewport height with the items. Here is a fiddle that I had put together for testing purposes. If anyone can use it, it's available: jsfiddle.net/6z3q35x0/9 (it went through various revisions). The problem is that you can't just show 5 items with a 100% height display:table element. — Joseph Marikle
– Joseph Marikle, Commented Dec 31, 2014 at 16:37
Is it accurate so say that the requirement for your <li> height is that it is always 20% of the viewport? The way that you've described that requirement is a bit confusing. — paceaux
– paceaux, Commented Dec 31, 2014 at 17:30

paceaux · Accepted Answer · 2014-12-31 17:32:04Z

1

Regarding the heights, one approach would be to use the vh keyword, which is 1% of the height of the viewport. It's only valid in IE9 up, but as I'm guessing this is a mobile screenshot, you should be ok.

You should also consider using flexbox, which works fine in mobile browsers, and it allows you to do vertical centering without all the messiness of display:table.

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 a dabblet: http://result.dabblet.com/gist/78afacb7e747b7e24e62/ba0f81dc9278ec743c58027e995a0f6c381329b8

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

edited Dec 31, 2014 at 17:32

answered Dec 31, 2014 at 17:04

paceaux

1,9221 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1027620 Over a year ago

What about iOS < 8 ? And the nested horizontal splits?

paceaux Over a year ago

The nested horizontal splits are fine if you're using flexbox. you'd set the interior li to flex-direction: row, and then you'd do the centering on the divs. I updated the dabblet to reflect this. flexbox is supported in iOS7. caniuse.com/#search=flex If you use a CSS preprocessor that has a compatibility support library, you should be fine with older flexbox browers, too.

paceaux Over a year ago

If you use Stylus as a CSS preprocessor, there's a library called Nib that comes with it that offers fantastic flexbox support all the way back to Android 2.4

user1027620 Over a year ago

Thanks for the update. however, I cannot see it n the dabblet :/

paceaux Over a year ago

I added an updated dabblet link, which includes not only the result, but the code.

|

indubitablee · Accepted Answer · 2014-12-31 16:53:42Z

0

perhaps something like this could point you in a 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 of hungerstar's insight

edited Dec 31, 2014 at 16:53

answered Dec 31, 2014 at 16:32

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

8 Comments

user1027620 Over a year ago

Why is it 49.7% instead of 50% - Just trying to understand :)

user1027620 Over a year ago

Also I think this breaks on iOS < 8 -> github.com/scottjehl/Device-Bugs/issues/36

indubitablee Over a year ago

@user1027620 it says it was resolved, and because theres a small space between the sub-sections that pushes 50% to the next line, probably something to do with the spacing of divs, i usually use bootstrap when dealing with grid spacings instead of tables

user1027620 Over a year ago

Do you recommend I add bootstrap to the solution? However, i don't need any of the styling it provides...

indubitablee Over a year ago

um, i dont think its necessary to add bootstrap, i just personally like the clean-ness it provides

|

JonathanW · Accepted Answer · 2014-12-31 17:13:12Z

0

I went for the 'calculate height with js' instead of vh. I think vh is more elegant but if you need more support you're going to have to use js.

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

I'm using flexbox for the vertical centering of text and the columns. Flexbox has pretty solid support at this point. http://caniuse.com/#feat=flexbox

answered Dec 31, 2014 at 17:13

JonathanW

4243 silver badges17 bronze badges

3 Comments

user1027620 Over a year ago

Thanks for the answer. However, this does not ensure the first five elements fill the viewport height. And that all elements have equal heights regardless of their content...

JonathanW Over a year ago

if one item is taller than viewheight / 5 do you want all items to grow to tallest height so they always stay equal height?

user1027620 Over a year ago

No I need to force all parent <li>s to have vh/5 as a maximum regardless of their content (so that only five lis can fill the viewport at one time)

fontophilic · Accepted Answer · 2014-12-31 17:47:27Z

I'm going to be using vh and flexbox in this solution to avoid doing any js. If you need to support older browsers, consider using a pollyfill such as: 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's my codepen: http://codepen.io/fontophilic/pen/yyVNQd?editors=110

Collectives™ on Stack Overflow

Flexible Custom Layout with CSS (possibly JS if needed)

4 Answers 4

7 Comments

8 Comments

3 Comments

HTML

CSS

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

8 Comments

3 Comments

HTML

CSS

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related