Question

我正在使用Win XP，并在Firefox，Chrome和IE上注意到了这一点。我有三个块元素，垂直对齐。我希望容器的最小高度为600像素，我希望中间元素占用尽可能多的垂直空间。问题是，即使我为中间元素指定高度：100％，它也不会扩展以填充空间。这是HTML ...

        <div class="productDetailsPanel">
            <div class="tabPanel">
                <div class="tabBar">Tab Bar</div>
                <div class="tabContent">Content</div>

                <table>
                    <tr>
                        <td><button value="Save">Save</button></td>
                        <td><button value="Reset">Reset</button></td>
                    </tr>
                </table>    
            </div>
        </div>

这是CSS ......

.productDetailsPanel {
    width: 74%;
    min-height: 600px;
    overflow-x: hidden;
    border-color: #BBBBBB;
    border-style: solid;
    border-width: 1px;
    margin: 10px 10px 0 5px;
    background-color: yellow;
}

.tabPanel { 
    height:100%; 
    width: 100%; 
    position: relative; 
    background-color:pink; 
    padding: 2px;    
}

.tabBar { 
    height: 2em;    
    background-color: orange;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2em;
}

.tabContent { 
    position: relative;
    top: 0px;
    background-color: silver;
    width: 100%;
    height: 100%;
}

我还创建了这个JSFiddle来说明这种疯狂 - http://jsfiddle.net/XAYWZ/。任何人都知道如何调整CSS以使中间面板占用尽可能多的垂直空间？

Answer 1

将栏中的按钮更改为

position: absolute;

并为其提供属性

bottom: 0px;

无法将元素扩展到高度= 100％

1 个答案: