Question

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

div是水平对齐的，div2的固定宽度值为356 px，div1应该是剩余的水平空间，减去4％......

4％我可以添加为div2边距，但我仍然无法设置该值占用其余空间...（它不能是固定值，因为页面是响应...）

我已经尝试过使用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大小

2 个答案: