填写动态div的剩余高度

Question

如何让左侧的底部框填充div的其余高度，使边框向下移动到框的底部？

现在，该行停在左框内容停止的位置

HTML

<div id="container">
        <div id="leftcolumn">
            <div id="fixedbox">
                Fixed size
            </div>
            <div id="restbox"><p>Fill out box</P></div>
        </div>
        <div id="rightcolumn">

            <p>Dynamic content</p>

        </div>
        <br style="clear:both;" />
    </div>

CSS

body {
    background-color:#ccc;
}
#container {
    margin:0 auto;
    width:80%;
    background-color: #fff;

}
#leftcolumn {
    width:29%;
        float:left;
        border-right:1px solid #000;

    }

    #rightcolumn {
width:68%;
        float:left;
        margin-left: 2%
    }

    #fixedbox {

        width:100%;
        height:200px;
        border-bottom: 1px solid #000;
    }

    #restbox {
        width:100%;
    }

http://jsfiddle.net/P6YQc/2/

Answer 1

是否有任何理由说明#rightcolumn上没有左边框而不是#leftcolumn上的右边框？

http://jsfiddle.net/P6YQc/7/

例如：

#leftcolumn {
    width:29%;
    float:left;
}

#rightcolumn {
    width:68%;
    float:left;
    border-left:1px solid #000;
    padding-left:10px;
    box-sizing: border-box;
}