Question

我正在构建一个布局为1160px的页面，它被拆分为左侧和右侧。右栏。

重要的是，即使在调整浏览器大小时，右列仍将是307px宽度，而左列应根据屏幕大小增长和缩小。

我如何实现这一目标？

                                 1160px
-------------------------------------------------------------------------
| |-------------------------------------------|  |-------------------|  |
| |                                           |  |                   |  |
| | Need to be calc in css 1160px-307px-gutter|  |        307px      |  |
| | can we do it with %?                      |  |                   |  |
| |-------------------------------------------|  |-------------------|  |                                                                 
-------------------------------------------------------------------------

Answer 1

使用：calc();

#content{
	position:relative;
	max-width:1160px;
	height:300px;
	background:red;
}
#left{
	width: -webkit-calc(100% - 307px);
	height:200px;
	background:green;
}

/*if not supported 'calc', you use*/
/*#left{
    position:absolute;
	height:200px;
	background:green;
    left:0;right:307px;
}*/
#right{
	position:absolute;
	width:307px;
	height:200px;
	background:rgba(0,0,0,0.5);
	right:0;top:0;
}

<div id="content">
    <div id="left">
        
    </div>
    <div id="right">
        
    </div>
</div>

Answer 2

http://jsfiddle.net/cjsjLub3/

box-sizing:border-box;将允许您告诉左div宽度为100％，并且任何填充都将包含在100％总宽度内。

注意：您可能不想使用*，但我将这几行以及他们各自的注释与我经常使用的代码（_s主题）一起复制，以便您可以根据需要查看研究。

CSS：

*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
    -moz-box-sizing:    border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
    box-sizing:         border-box;
}   
#content {
    height:600px;
    left:0px;
    position:relative;
    width:600px;
    top:0px;
}
#left {
    height:100%;
    left:0px;
    padding:0 307px 0 0;
    position:relative;
    top:0px;
    width: 100%;

    background:#ff0000;

}
    #right {
    height:100%;

    margin:0;
    position:absolute;
    right:0px;
    top:0px;
    width: 307px;

    background:#0000ff;

}

HTML：

<div id="content">
    <div id="left">
    oijhr o;gihr ogehrgoi ehro;giehr oiehr oiehrgo ierho gihrog ihrog ihroig horig heori ghoepi hoih poerih goperihg opeirhg opeiurhg poeirhg poeirhg poeirhg eorihg oeirhg poeirhg;eobgnreoigheor igjh orig oerihg oerihg oerigh o;erihg oerih opir hgoeirh gorpih goperih goperih o
    </div>
    <div id="right">

    </div>
</div>

Answer 3

你可以使用CSS3 flexbox非常干净地完成这项工作：

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
}

.Layout {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.Layout-left {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  outline: 1px dashed red;
}

.Layout-gutter {
  width: 40px;
}

.Layout-right {
  width: 307px;
  outline: 1px dashed red;
}

<div class="Layout">
  <div class="Layout-left">
    100% - 40px - 307px
  </div>
  <div class="Layout-gutter">
    40px
  </div>
  <div class="Layout-right">307px</div>
</div>

Answer 4

到目前为止，所有解决方案都使用calc，float，flex-box或其他属性，我认为这些属性过于复杂。您可以使用CSS Tables以最少的代码和最大的跨浏览器支持为您提供所需的布局。

查看此demo jsFiddle或以下代码段。

html, body {margin:0; background-color:#eee;}
.bounds {display:table; width:100%; max-width:1160px; margin:20px auto; background-color:white;}
.bounds .left, .bounds .right {display:table-cell;}
.bounds .right {width:307px; background-color:#eebbff;}
.bounds .content {padding:20px;}

<div class="bounds">
    <div class="left">
        <div class="content">left</div>
    </div>
    <div class="right">
        <div class="content">right</div>
    </div>
</div>

CSS响应式设计左列％右列px

4 个答案: