Question

继承人的情景，

我想在响应式网站上进行整页布局。

我有一个左栏（a）和一个右栏（b）坐在容器（c）

a）宽度的30％ - 最大宽度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

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

.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

Answer 2

您可以使用表行为来实现此目的。

这是有效的SAMPLE.

CSS：

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

#con {
  width: 100%; 
  height: 100%;
   display:table;
  background: #00f;
}   

#a, #b {
  display: table-cell;
}

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


#b{

    background-color: #DDD; 



}

div扩展高度＆amp;宽度可变

2 个答案: