我试图创建一个两个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;
- }
