Div의 바닥에 UL을 고집

Question

I DIV (데이터 주입에 따른 높이 변화)가 알려지지 않은 높이가있는이 DIV (한 페이지에서 8 페이지)가 있으며 DIV의 바닥에 "스틱"해야합니다.그러나 그것은 운동하지 않습니다.

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

이 fiddle : http://jsfiddle.net/jlzza/5/ .스타일 변경 사항은 아래 주석을 달았습니다.

다음 스타일 규칙을 사용하십시오.

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

.