0

I am looking for the easiest way to get a < ul > and it's < li > elements to a 100% height of the < ul >'s parent. The parent is not fixed (and I am trying to avoid that so it is flexible on mobile devices). Here is the JSFiddle

Basically I want the red boxes to be 100% height of the grayish box.

Thanks!

Note: I have tried various things already, its just nothing seemed to work properly.

  • Can you please check this is what you are looking for http://jsfiddle.net/xzadjkrx/5/ – Bhasyakarulu Kottakota Dec 13 '15 at 23:43
  • Eh no a fixed area up the height. I am trying to avoid a fixed height header. –  Dec 13 '15 at 23:47
  • A parent container of the ul will need a fixed height declared for them to know what 100% height means. Otherwise you will need to do some fancy java script to dynamically detect the height. – Derek Gutierrez Dec 14 '15 at 00:05
  • When you say you want the `ul` to be *100% height of the `ul`s parent*, you mean 100% height of an unknown variable? The parent's height is dynamic? – Michael Benjamin Dec 14 '15 at 00:17
  • Right, I need the unordered lists's parent to be dynamic. –  Dec 14 '15 at 00:51
  • Have you tried flexbox - http://jsfiddle.net/nw7wr51g/? – Alex Dec 14 '15 at 01:01
  • I think @Aleksey is correct. You should consider using flexbox. Also, you applied a `height: 100%` to the `ul`. But the browser needs to know *100% of what?* ... With flexbox you don't need to use percentage heights, but if you decide to go that way, review this first: http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Dec 14 '15 at 01:14
  • @Aleksey is correct with the use of flexbox for this situation. However, flexbox is still not supported well in IE, if you need that browser support. – teynon Dec 14 '15 at 05:38

1 Answers1

0

There are several things you need to do.

  1. Specify the height of the .site-header e.g. 40px
  2. Every parent of li needs to be 100% heigh
  3. Make the title and nav container inline

This should work

 h1 {
  margin: 0;
  display: inline;
}
.site-header {
  background: rgba( 0,0,0,0.5 );
  width: 100%;
  height: 40px;
}
.row {
  height: 100%;
}
.site-title {
  display: inline;
  font-family: 'Roboto Mono';
  font-weight: 100;
}
h1 {
  margin: 0;
  padding: 0;
  display: inline;
}
.site-nav {
  height: 100%;
  float: right;
}
ul {
  list-style-type: none;
  height: 100%;
  margin: 0;
}
li {
  background: red;
  float: left;
  height: 100%;
  text-align: center;
  width: 150px;
}
arc
  • 4,553
  • 5
  • 34
  • 43