从另一个 div 计算 div 大小

Question

我正在尝试设置 #div1 size width: 100% - (#div2 width + 4% ) 可能吗？

div水平对齐，div2固定宽度值为356px，div1应该是剩下的水平space,负4%...

我可以添加4%作为div2边距，但我仍然无法设置该值来占据剩余的space...（它不能是一个固定值，因为页面反应灵敏...)

我已经尝试过使用 59% 这样的值，但是当我缩小页面时，它会跳行...

.site-wrap {
  min-width: 100%;
  min-height: 100%;
  background-color: #5f5f5f;
  position: relative;
  top: -18;
  bottom: 100%;
  left: 0;
  z-index: 1;
}
#div2 {
  margin: 15px auto auto auto;
  left: 0;
  right: 0;
  height: auto;
  width: auto;
  float: right;
}
#div1 {
  margin: 15px 15px auto auto;
  left: 0;
  right: 0;
  height: 587px;
  width: 59%;
  float: left;
  background-color: red;
}

<div class="site-wrap">
  <div id="div2"></div>
  <div id="div1"></div>
</div>

Answer 1

在这种情况下您需要使用定位。这是一个案例：

+-------+-----------+
| 356px | FLUUUUUID |
+-------+-----------+

或者

+-------+-----------+
| 356px | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

固定流体模型。在我的代码片段中，我演示了两种示例。在第一种情况下，流体的尺寸较小。而且下一个内容太长了。

片段

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

Answer 2

类似的东西。 Css

#responsive {
  background: red;
  height: 10px;
  width: calc(100% - 356px);
  float: left;
}

#fixed {
  background: blue;
  height: 10px;
  width: 356px;
  float: left;
}

HTML

<div id="responsive"></div>
<div id="fixed"></div>

从另一个 div 计算 div 大小

calculating div size from another div

html

css

width