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;，e-g：

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

Answer 2

添加

html, body {
    height: 100%;
}

（http://jsfiddle.net/zYWjJ/2/）

以100％的高度并排创建两个浮动div

2 个答案: