如何使用[重复]将Content Div扩展到浏览器

Question

这个问题已经在这里有了答案：

• CSS：将宽度/高度设置为百分比减去像素 11回答

下面是我的代码，

<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高度

如何解决这个问题？

Answer 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;
}

请查看演示。关于CSS3 flexbox模块，请单击此处 。

Answer 2

很难理解你的问题，

但是我认为可以通过以下几种方式回答您的问题

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

或者你可以这样

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

演示版

除非您使用Javascript否则实际上没有办法使元素的高度与其他元素相同