css - div 扩展高度和可变宽度

Question

这是场景，

我打算在响应式网站上使用完整的页面布局。

我在容器 (c) 中有一个左栏 (a) 和一个右栏 (b)

a ) 将是宽度的 30% - max-width 480px ；必须展开以填充容器高度 ( c )

b ) 需要坐在 (a) 的右边；必须展开以填充容器高度 ( c ) 和宽度

<div id="con">
 <div id="a"></div>
 <div id="b"></div>
</div>

CSS:

#c { }

#a {
    float : left;
    width: 30%;
    max-width : 480px;
    height: 100%;
}

#b {
    background-color: #DDD;
    margin-left : 480px; 
    /* make it work with any margin left as it wont always be 480  */
    margin-right : 0;
}

css (a) 不会扩展以适应 (c)，而 (b) 之所以有效，是因为我已将 margin-left 设置为 480，但在大多数情况下它不会是页面宽度的 30%。 我可以在 css 中实现这个还是应该使用 jquery？

Answer 1

对a 和b 容器使用display: table-cell。像这样:

.c{
    display: table;
    width: 100%;
    height: 500px;  /* mention some height */
}

.a {
    width: 30%;
    max-width: 480px;
}

.a, .b {
    display: table-cell;
    vertical-align: top;
}

Working Fiddle