Collant ul au bas d'un div

Question

J'ai cette div (8 d'entre eux dans une page) qui ont une hauteur inconnue (le changement de hauteur en fonction de l'injection de données), j'ai besoin de "coller" au bas de la DIV.Mais ça ne marche pas.

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

Voir ce violon: http://jsfiddle.net/jlzza/5/ .Les changements de styles sont annotés ci-dessous.

Utilisez les règles de style suivantes:

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