Attaccare ul al fondo di un div

Question

Ho questo div (8 di loro in una pagina) che hanno un'altezza sconosciuta (l'altezza cambia secondo l'iniezione dei dati), ho bisogno di "attaccare" in fondo al div.Ma non sta funzionando.

CSS:

    .menuItem {
    width: 45%;
    padding-top: 2%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: white;
    line-height: 2.5em;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 5%;
    margin-top: 5%;
    box-shadow: 0.33em 0.25em 3.25em black;
    text-align: center;
    color: black;
    float: left;
    height: 350px;
}
.menuItem h2 {
    font-size: 1.5em;
    font-weight: 100;
    font-family: "Alef Hebrew", 'Lobster', cursive;
    border-bottom: solid black;
    padding-bottom: .6em;
    width: 99%;
    font-stretch: narrower;
}

.menuItem p {
    font-size: 1.2em;
}

.menuItem span {
    font-weight: lighter;
    width: auto;
    letter-spacing: .2em;
    color: white;
    background-color: black;
    padding: 2%;
    display: table;
    margin-top: -10%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.menuItem img {
    width: 35%;
    display: table;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0.33em 0.25em 1.25em black;
    /*margin-bottom:2%;*/
}

.menuItem ul {
    position:relative;
    margin-bottom:10px;
    width: 100%;
    display: table;
    margin-right:auto;
    margin-left: auto;
    background-color: black;

    margin-top: 1em;
}

.menuItem li {
    float:left;
    margin-right: auto;
    margin-left: auto;
    color: white;
    font-size: 1em;
    direction: rtl;
    width: 33%;
    list-style: none;
}`

.

Answer 1

Vedi questo violino: http://jsfiddle.net/jlzza/5/ .I cambiamenti degli stili sono annotati sotto.

Utilizzare le seguenti regole di stile:

.menuItem {
  position: relative;   //New rule required for the absolute positioning of the ul.
  width: 45%;
  padding-top: 2%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 60px;   //Pad up below as much as the height of the ul + its distance from the bottom
  background-color: white;
  line-height: 2.5em;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 5%;
  margin-top: 5%;
  box-shadow: 0.33em 0.25em 3.25em black;
  text-align: center;
  color: black;
  float: left;
}

.menuItem h2 {
    font-size: 1.5em;
    font-weight: 100;
    font-family: "Alef Hebrew", 'Lobster', cursive;
    border-bottom: solid black;
    padding-bottom: .6em;
    width: 99%;
    font-stretch: narrower;
}

.menuItem p {
    font-size: 1.2em;
}

.menuItem span {
    font-weight: lighter;
    width: auto;
    letter-spacing: .2em;
    color: white;
    background-color: black;
    padding: 2%;
    display: table;
    margin-top: -10%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.menuItem img {
    width: 35%;
    display: table;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0.33em 0.25em 1.25em black;
    /*margin-bottom:2%;*/
}

.menuItem ul {
    position: absolute;  // Rule required to position it absolutely w.r.t to the div
    bottom: 10px;         // 10px of distance from the bottom.
    width: 172px;
    display: table;
    margin-right:auto;
    margin-left: auto;
    background-color: black;

    margin-top: 1em;
    margin-bottom: 0px;  // This rule is required to nullify the effect of user-agent differences
    padding: 0 10px;
}

.menuItem li {
    float:left;
    color: white;
    font-size: 1em;
    direction: rtl;
    width: 50%;
    list-style: none;
}

.