【问题标题】：How to extend Content Div to browser with [duplicate]如何使用 [重复] 将 Content Div 扩展到浏览器
【发布时间】：2013-06-12 23:06:53
【问题描述】：

下面是我的代码，

<div class="wrapper">
  <div class="left">
  </div>

  <div class="right">
  </div>
</div>

我已将 wrapper 的宽度设置为 100%，我现在将左侧的宽度设置为 40px。

1) 我想将我的right div 宽度从40px 扩展到浏览器窗口几乎等于 98.6% 2）我想将我的left div 高度扩展到right div 高度

如何解决这个问题？

【问题讨论】：

标签： html css styles stylesheet

【解决方案1】：

请尝试 css3 flexbox 模块，如下所示：

HTML

<div class="wrapper">
  <div class="left">
    left
  </div>

  <div class="right">
    right
  </div>
</div>

CSS

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  height: 100%;
  width: 100%;
  display:-moz-box;
  display:-webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.left {
  width: 40px;
  background: green;
}
.right {
  -moz-flex-box: 1;
  -webkit-flex-box: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: orange;
}

请查看demo。关于CSS3 flexbox模块，请点击here。

【讨论】：

【解决方案2】：

很难理解你的问题，

但我认为这里有几种方法可以回答您的问题

.right{
   width:calc(100% - 40px);
}

或者你可以这样做

.right{
    height:100px;
    margin:0 20px;;
    background:#EEE;
}

Demo

除非你使用Javascript

【讨论】：