css - 使用float left时需要取div元素剩余宽度

Question

这是我的代码和我的期望。有什么好的建议请多多指教。

.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:??????;
  }

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

我想在减小 dash-nav 宽度后保留 .dash-content 剩余宽度(它将是 25%，但最大宽度为 223px)。因此，如果我设置 75% 的宽度，我就会在容器中获得额外的空间用于大视口(viewport)设备。我知道对于较小的设备它会起作用。我想在所有视口(viewport)中使用剩余宽度。提前致谢。

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是否支持计算...

如果您不能使用它，请尝试这个解决方案(可能会为您指明正确的方向):

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

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