Brian Genisio Brian Genisio - 1 month ago 4
CSS Question

Getting inline-block element's height to fill the parent

I have a container with two items. One of those items is a

select
element, so I need to set the
size
attribute via HTML. I want the other item in the container to stretch its height to fit the container. I can't figure it out. I don't want to explicitly set the height of the container because I don't know the size of that select box.

HTML

<div class="container">
<div class="column">Stretch to fill?</div>
<div class="column">
<select size="15">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div>


CSS

.container {
padding: 5px;
border: 1px solid black;
}

.container .column {
display: inline-block;
width: 40%;
background-color: #AAA;
padding: 5px;
margin: 5px;
vertical-align: top;

height: 100%;
}

select {
width: 100%;
}


Fiddle
http://jsfiddle.net/3GfWv/4/

Answer

If table-cell is an option, here's a way to do it:

See fiddle.

.container {
    display: table;
    width: 100%;
    padding: 5px;
    border: 1px solid black;
}

.container .column {
    display: table-cell;
    width: 40%;
    background-color: #AAA;
    padding: 5px;
    border: 5px solid white;
    vertical-align: top;

    height: 100%;
}

select {
    width: 100%;
}
Comments