html - 并排创建两个高度为 100% 的 float div

Question

我尝试创建一个高度为 100% 的并排 div，我设法使第一个 div 正常工作，但第二个出现问题，过去 3 小时一直在尝试这样做。

#mainWrapper{
    width: 900px;
    margin:0px auto;
    background:#fff;
}

/*leftColumn */
.leftColumn {
    float:left;
    width:250px;
    height:100%;
    background:#fafafa;
    border-left:solid 1px #dedede;
    position:fixed;
    top:0px;
}

/* Content */
.mainContent {
    float: left;
    width: 650px;
    height:100%;
    background:#fff;
    margin-left:252px;
    padding-bottom: 50px;
}

它应该是什么样子的例子 http://i49.tinypic.com/ycef7.jpg

目前看起来如何。(尝试了一切不知道如何修复它) http://i49.tinypic.com/2ryk5eo.png

Answer 1

与其为两个向左浮动的内部 div 指定显式高度，不如在父 div 上使用 overflow:hidden;，例如:

#mainWrapper{
    width: 900px;
    margin:0px auto;
    background:#fff;
    overflow:hidden;
}