使用浮點數時需要帶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-content剩餘寬度減少dash-nav寬度後（這將是25％，但最大寬度爲223px）。所以，如果我把75％的寬度，我在容器中爲大型視口設備獲得額外的空間。對於較小的設備，它會工作我知道。我想在所有視圖端口中使用剩餘寬度。提前致謝。

Answer 1

如果你被允許使用鈣再加入這個你的風格標籤內：

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

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>