使用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的其余水平空间

回答

相关问题