mardi 21 avril 2015

height: 100% of remaining space in element with fixed height

I've absolute positioned div with an fixed height and hidden overflow. I want to place an list thus height shall be 100% of the remaining height. I want to do this with pure CSS. Is this possible?

CODEPEN EXAMPLE

HTML

<div class="parent">
  <ul>
    <li>foo</li>
    <li>bar</li>
    // ...  
  </ul>
</div>

CSS

.parent {
  position: absolute;
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: red;
}

.parent ul{
  background: green;
}

Here's an simple image showing what I mean by 100% of the remaining height.
enter image description here

Aucun commentaire:

Enregistrer un commentaire