css – 获取inline-block元素的高度以填充父元素

前端之家收集整理的这篇文章主要介绍了css – 获取inline-block元素的高度以填充父元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个容器有两个项目。其中一个项目是一个select元素,所以我需要通过HTML设置size属性。我想让容器中的其他项目伸展其高度以适应容器。我不能想出来。我不想显式地设置容器的高度,因为我不知道该选择框的大小。

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是一个选项,这里有一个方法

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%;
}
原文链接:https://www.f2er.com/css/222075.html

猜你在找的CSS相关文章