Question

这是我的代码和我的期望。请提出任何好的建议。

＆＃13;

.dash-wrapper {
  height: 100%;
  position: relative;
}

.dash-wrapper > div {
  height: 100%;
  float: left;
}

.dash-nav{
  background-color: #606B79;
  max-width:223px;
  width: 25%;
}

.dash-content{
  width:??????;
  }

＆＃13;

<div class="dash-wrapper">
  <div class="dash-nav">
  </div>
  <div class="dash-content">
  </div>
</div>

＆＃13;

我想在减少.dash-content宽度后保持dash-nav剩余宽度（它将是25％，但最大宽度是223px）。因此，如果我放入75％的宽度，我会在容器中为大视图端口设备获得额外的空间。对于较小的设备，我知道它会工作。我想在所有视口中使用剩余宽度。提前致谢。

Answer 1

如果允许使用calc，请在样式标记中添加：

    .dash-content {
        background-color: #F00;
        width: 75%;
    }
    //have to change this by a few pixels to handle all screen widths
    @media only screen and (min-width: 994px) {

        .dash-content {
            width: calc(100% - 223px);
        }
    }

Here支持calc ...

如果您无法使用它，请尝试此解决方案（可能指向正确的方向）：

＆＃13;

    .dash-wrapper {
        width: 100%;
        height: 100px; /*made this 100px to show in snippet, change to %*/
        position: relative;
        border: 1px solid #000;
    }

        .dash-wrapper > div {
            height: 100%;
        }

    .dash-nav {
        background-color: #606B79;
        max-width: 223px;
        width: 25%;
    }

    .dash-content {
        width: auto;
        float: right;
    }

＆＃13;

<div class="dash-wrapper">
  <div class="dash-nav">
  </div>
  <div class="dash-content">
  </div>
</div>

＆＃13;

Answer 2

Flexbox可以做到这一点：

.dash-wrapper {
  height: 100px;
  display: flex;
}
.dash-nav {
  background-color: #606B79;
  max-width: 223px;
  flex: 1 0 25%;
}
.dash-content {
  flex: 1;
  background: plum;
}

<div class="dash-wrapper">
  <div class="dash-nav">
  </div>
  <div class="dash-content">
  </div>
</div>

使用float left时需要取div元素的重映射宽度

2 个答案: