我试图创建一个两个div并排填充我的屏幕100％.左侧div包含一些菜单,右侧包含内容.这是我目前的代码：
http://jsfiddle.net/HpWZW/.目前的问题是高度只有我最小的div的内容.因此,在这种情况下,右栏中的iframe大于左栏中的菜单项;但是,高度仅限于左侧divs内容而非右侧.有任何想法吗？谢谢！
码
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
</div>
…
html,body {height: 100%}
.table {
display: table;
height: 100%;
}
.innerLeft {
display: table-cell;
min-width: 160px;
background-color: lightblue;
color: black;
}
.innerRight {
display: table-cell;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
解决方法
我已经多次遇到同样的问题,直到我发现：
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
这是一个有效的CSS解决方案,可让您的colums共享高度.然后两者都将是最大列的高度.
如果你想让你的colums填满整个屏幕,你可以使用类似的东西
.innerLeft {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
}
.innerRight {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
}
