获取inline-block元素的高度以填充父元素 [英] Getting inline-block element's height to fill the parent

问题描述

我有一个包含两个项目的容器。其中一个项是 select 元素，因此我需要通过HTML设置 size 属性。我想让容器中的其他项目伸展其高度以适应容器。我不能想出来。我不想显式设置容器的高度，因为我不知道该选择框的大小。

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 / p>

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

小提琴
http://jsfiddle.net/3GfWv/4/

推荐答案

如果 table-cell 是一个选项，可以这样做：

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

小提琴。

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

这篇关于获取inline-block元素的高度以填充父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！