使用div動態寬度填充父div的其餘水平空間

我想使div填充父寬div的其餘水平空間，其中具有動態寬度（基於屏幕寬度）。使用div動態寬度填充父div的其餘水平空間

如何用純CSS實現這一目標？我試圖達到的效果如下圖所示（'可填空間'）。

以下示例中的代碼將當前是：

#wrap { 
    width: 100%; 
    float: left; 

    #container { 
     width: 100%; 
     padding: 0px 30px; 

     #static-div { 
      width: 60px; 
      height: 60px; 
     } 

     #fillable-space { 
      /* What would my code be to fill the remaining space? */ 
     } 
    } 
}

謝謝問候

來源

2015-11-28 Enzio

@SurajPalwe如我如上所述;我試圖用純CSS來實現這一點。 – Enzio

你有答案，但這個鏈接可能會幫助你http://stackoverflow.com/questions/1359025/css-layout-dynamic-width-div –

我會用

width: calc(100% - 60px); 
float:left;

像我在這個小提琴那樣： http://jsfiddle.net/74ovL80s/

，如果你需要支持舊瀏覽器看這裏，看他們是否支持Calc功能：http://caniuse.com/#feat=calc

來源

2015-11-28 16:03:47 davidbucka

我從來沒有聽說過'鈣'之前。這似乎很好，它受到大多數瀏覽器的支持......謝謝先生。 – Enzio

非常歡迎 - 很高興我能告訴你一些新的東西:) – davidbucka

如果您需要支持不支持css calc如IE8瀏覽器，你可以這樣做。

#wrap { 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
#container { 
 
    width: 80%; 
 
    padding: 0px 30px; 
 
    height: 70px; 
 
    background: grey; 
 
} 
 
#static-div { 
 
    width: 60px; 
 
    height: 60px; 
 
    background: red; 
 
    float: left; 
 
} 
 
#fillable-space { 
 
    height: 60px; 
 
    background: blue; 
 
    margin-right: 60px; 
 
}

<div id="wrap"> 
 
    <div id="container"> 
 
     <div id="static-div"> 
 
      
 
     </div> 
 
     <div id="fillable-space"> 
 
     </div> 
 
    </div> 
 
</div>

來源

2015-11-28 16:22:48 LGSon

使用div動態寬度填充父div的其餘水平空間

回答

相關問題