2

我正在使用 display: table-row 处理相当复杂的布局，而在 IE 中，当我使用嵌套表时，我无法拉伸行。

在 Chrome/FF 与 IE(10)中的http://jsfiddle.net/DVxpZ/7/中查看此内容

我希望蓝色行伸展以填充可用空间，紫色行位于底部。

感激地收到任何建议。我尝试使用位置：固定；对于这种布局，但是随着屏幕尺寸变小，我无法调整行的大小。

<div id="full-height" class="table">
    <header class="table-row"><div class="button"></div></header>
    <div id="main"class="table-row">
        <div class="table">
            <div id="row1" class="table-row"><div class="button"></div></div> 
            <div id="row2" class="table-row"><div class="button"></div></div> 
            <div id="row3" class="table-row"><div class="button"></div></div> 
            <div id="row4" class="table-row stretch-row"><div class="button"></div></div> 
            <div id="row5" class="table-row"><div class="button"></div></div> 
        </div>
    </div>
</div>

和CSS

body, html{
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
}
.table-cell{
    display: table-cell;
}
.full-cell{
    height: 100%;
    width: 100%;
}
#main{
    height: 100%;
}

.button{
    display: block;
    height: 30px;
    width: 100px;
    background-color: green;
    margin: 3px;
}

#row1{
    background-color: pink;
}

#row2{
    background-color: orange;
}

#row3{
    background-color: red;
}

#row4{
    background-color: blue;
}


#row5{
    background-color: purple;
}


#full-height{ 
    height:100%;
    width: 100%;
}

.table{
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;
}

.table-row {
    display: table-row;
}

.stretch-row{
    height: 100%;
}
4

1 回答 1

0 
*{
    margin:0;
    padding:0;
}

尝试重置所有元素边距？？

http://jsfiddle.net/DVxpZ/9/

于 2013-08-29T09:47:15.703 回答