css – 如何在每个屏幕上为部分或div内部制作全高？

大家好我创建了一个html布局,左右两边一个有导航菜单,右边有内容

我需要两个都有全高度必须到屏幕的底部,即使有很低的内容.

现在看起来像

我的小提琴

demo

而且我尝试了身体和html的全高度

body, html{
    height:100%;
}

(相关)HTML：

<div class="wrapper">
    <div class="left">
        <!-- stuff -->
    </div>
    <div class="spacer"></div>
    <div class="right">
        <!-- stuff -->
    </div>
</div>

(相关)CSS：

body, html {
    height : 100%;
}
.wrapper {
      width : 600px;
    display : table;
     margin : 0 auto;
     height : 100%;
}
.left, .right {
    display : table-cell;
}
.left {
    width : 30%;
}
.right {
    width : 65%;
}
.spacer {
       display : table-cell;
    background : transparent;
         width : 5%;
}

Running Demo

我使用normalized.css来重置样式并避免使用否则应用于display：table; DIV.尝试在演示中删除它(左侧的“外部资源”菜单)以查看我的意思.

Take a look here阅读CSS Resets上的其他内容.

编辑：添加透明垫片.