How to Make an <A> 100% Height of <Li>

100% Height on LI

Here is a quick example with no link style but this is how I do it.

http://jsfiddle.net/etienne_carre/ZVXFD/1/

Make sure the ul have no pading and margin and the same height as the header. After create the li the same height as the ul and header.

li will not take 100% height of the parent ul

In this case, when you set height:100% it isn't inheriting any height from its parent. If you want the list items to have 100% height of the div #wrapper, then you should set the ul's height to 100% and set a height on the div #wrapper in pixels or em's:

http://jsfiddle.net/SF9Za/1/

#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:250px;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

If you'd rather have it stretch to the full height of the browser window, then you need to set the height of html, body in your css to 100%, and then all of the elements down to the li (html, body, div#wrapper, ul.list, and li) must have 100% height:

http://jsfiddle.net/YdGra/

html, body{
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:100%;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

Here's some other links that you might want to check out that talk about this:

CSS 100% height layout
Setting height: 100% on my label element doesn't work
http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

How to make an a 100% height of li?

You are dealing with tables, and table height values are used as a minimal value when computing table and table-cell heights.

The easiest fix is to provide a height value to the CSS table parent block.
First, to the ul, apply display: table instead of table-row, and then specify height: 1px and any non-zero value will work. Remember to zero out margins and padding (due to the ul default settings).

Make sure that the CSS table-cell element has height: 100%, and then the a element will take on the height (since it is displayed as a block).

Note: If you set the top level height to 100%, this will work in Chrome but fail in IE.

ul {  display: table;  height: 1px; /* any small value will work */  margin: 0;  padding: 0;}li {  width: 100px;  border: 1px solid black;  display: table-cell;  height: 100%;}a {  display: block;  background-color: yellow;  height: 100%;}

<ul>  <li>    <a href="#">Test</a>  </li>  <li>    Test Test Test Test  </li></ul>

How to make a tag take 100% height of li element

In order for a child element to assume 100% height of the parent element, the parent element must have its size set. Its not enough to give your <li> element a font size for its <a> child to extend its height to cover it. The <li> must inherit the height from its parent or have it defined. Also, your <a> element must be a block or inline-block element to accept height.

Try:

<style type="text/css">
    ul#socialIcons, ul#socialIcons>li { margin:0px; padding:0px; list-style:none; }
    ul#socialIcons>li>a { display:block; font-size:1em; margin:0px; padding:0.5em; }
</style>

Also I recommend that you take a look at the concept of HTML box model: https://www.w3schools.com/css/css_boxmodel.asp

How to display child elements of li at 100% height?

To achieve that you have to use table structure which mean make the li tag act as table and content act as tabel-cell and icon act as another table cell.

also add a container for the text and never let it flow on any container

ul {  padding: 0;  margin: 0;  list-style: none;  width: 100%;}ul li {  direction: rtl;  text-align: right;  padding: 0 1rem 0 0;  margin: 0;  font-size: 1.1rem;  color: #8c97b2;  font-weight: 400;  border-bottom-style: solid;  border-bottom-width: 1px;  border-bottom-color: #dadfea;  line-height: 54px;  height: 100%;  display: table;  width:100%;}ul li .download {  height: 100%;  float: left;  border-right-style: solid;  border-right-width: 1px;  border-right-color: #dadfea;  display: tablle-cell;}ul li p{  display:table-cell;}ul li .download i {  font-size: 22px;  width: 54px;  text-align: center;  height: 100%;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>    <ul>        <li><p>طلب المشروع من قبل الجهة المستفيدة</p><div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li>        <li class="list_background"><p>وجود قرار تخصيص موقع من قبل المجلس البلدي</p><div class="download"><a href="#" class="active"><i class="fa fa-download"></i></a></div></li>        <li><p>بكتاب الامانة العامة لمجلس الوزراء رقم 344 - 3679 المؤرخ</p><div class="download"><a href="#" class="inactive"><i class="fa fa-download"></i></a></div></li>        <li class="list_background">على مهندس المشروع التأكد من استيفاء ما     يلي حسب ما جاء بكتاب الأمانة العامة لمجلس الوزراء رقم 344-3679          المؤرخ (مرفق صورة من الكتاب المذكور) :         <br>- استلام متطلبات المشروع معتمدة من قبل الجهة المستفيدة.         <br>- إعداد كراسة طلب المشروع.         <br>- الحصول على موافقة وزارة  المالية على اعتماد ميزانية المشروع.         <br>- شهادة خلو الموقع من العوائق.</p><div class="download"><a href="#"   class="inactive"><i class="fa fa-download"></i></a></div></li>    </ul>

Setting a LI to 100% height in a responsive framework

Class cbp-rfgrid add height:100%; and change height:400px; to height:100%;

.cbp-rfgrid {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.cbp-rfgrid li {
    position: relative;
    float: left;
    overflow: hidden;
    width: 10%; /* Fallback */
    width: -webkit-calc(100% / 10);
    width: calc(100% / 10);
    height:100%; /* CURRENT HEIGHT, SHOULD BE 100% BROWSER HEIGHT  */
}

live example:
http://jsfiddle.net/g9nDQ/1/

ul li - how to center li when ul height is 100%

One of the options is to use flexbox:

// here extending your original css proposal

ul {
  width:100%;
  height:100%;
  text-align: center;
  position: absolute;
  top: 0;
  background: red;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}
li {
  background-color: white;
  border: 1px solid;
}

JSfiddle - http://jsfiddle.net/37eekc8n/

How can I force a dynamic ul to be 100% the height of it's parent, no more, no less?

This can be achieved easy with jQuery:

jQuery:

$(document).ready(function(){

    var list = $('ul.col_selector_container');

    list.css({'min-height':list.parent().height(), 'max-height':list.parent().height()});

    $(window).resize(function(){
       list.css({'min-height':list.parent().height(), 'max-height':list.parent().height()});
    });

});

Or use "closest('selector')" to get the height of the parent higher in the DOM tree.

Update in 2017:

This can be achieved with FLEX now:

<style>
.parent{
    background:red;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height:300px;
}

ul{
    background:yellow;
}
</style>

<div class="parent">
    <ul>
        <li>Test1</li>
        <li>Test2</li>
    </ul>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Set Height of li using simple CSS

Updated

Here is used padding instead of line-height to achieve a distance between the time items, where I set a main top padding on all and the removed it again for the first 5.

.appul {  margin: 0;  padding: 0;  list-style: none;  display: block;  position: relative;  overflow: hidden;  }.appul:before,.appul:after {  content: ' ';  position: absolute;  display: block;  border-color: #CCC;  border-width: 0 2px;  border-style: solid;  top: 0;  left: 20%;  width: 20%;  height: 100%;  pointer-events: none;   /* Alt. 1: let mouse event pass through   */  z-index: -1;            /* Alt. 2: put pseudo elements beneath    */}.appul:after {  left: 60%;}
.appul li {  float: left;  box-sizing: border-box;  width: 20%;  vertical-align: top;  padding: 30px 0 5px;  text-align: center;}.appul li:nth-child(-n+5) {  padding-top: 5px;}.appul li a:hover {  color: #00c8cf;  font-size: 18px;  cursor: pointer;}

<ul class="appul">  <li>08:00</li>  <li>08:15</li>  <li>08:30</li>  <li>08:45</li>  <li>09:00</li>  <li>09:15</li>  <li>09:30</li>  <li>09:45</li>  <li>10:00</li>  <li>10:15</li>  <li>10:30</li>  <li>10:45</li></ul>