html - div 在子 div 中达到一定数量的行后停止拉伸

Question

<img id='imgT' src="...">

    <div id="divL"></div>
    <div id="divR">
        <div id='chapter'>
            aaaaaaaaa<br>
            aaaaaaaaa<br>
            aaaaaaaaa<br>
            aaaaaaaaa<br>
            .....
            .....
    </div>
    </div>

css

html { height: 100%; }
body{
    height: 100%;
    max-width:1024px;
}
#imgT{
    width:100%;
    border:thin solid blue;
    display:block;
}
#divL{
    width:20%;
    height: 100%;
    background:#008080;
    float:left;
}
#divR{
    width:80%;
    height: 100%;
    background:blue;
    float:left;
}

在 div 中达到一定数量的行后chapter-divL并divR停止拉伸到 100% 的高度！？

你可以在这里看到

Answer 1

使用 css 表。

小提琴

.wpr
{
    display: table;
    width: 100%;
}
#divL{
    width:20%;
    height: 100%;
    background:#008080;

    display:table-cell;
}
#divR{
    width:80%;
    height: 100%;
    background:blue;

    display:table-cell;
}