Pergunta
Eu tenho essa div (8 deles em uma página ) que têm um desconhecido altura (a altura de mudar, de acordo com os dados de injeção), eu preciso de "furar" o fundo da div.Mas ele não está trabalhando fora.
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;
}`
Solução
Veja este violino: http://jsfiddle.net/jLzza/5/ .Os estilos alterações são anotadas abaixo.
Use as seguintes regras de estilo:
.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;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow