是否有可能在CSS3中使50px的div小于100%?

是否有可能在纯CSS中使div小于100%? 我希望<div>只有50px小于100%。 我不想要任何JavaScript。

是的你可以。 不使用IE的expression() ,你可以使用calc()在CSS3中做到这一点。

 div { width: 100%; width: -webkit-calc(100% - 50px); width: -moz-calc(100% - 50px); width: calc(100% - 50px); } 

演示: http : //jsfiddle.net/thirtydot/Nw3yd/66/

这会让你的生活变得如此简单。 目前支持三种主要浏览器:Firefox,Google Chrome(WebKit)和IE9: http : //caniuse.com/calc

MDN: https : //developer.mozilla.org/en/CSS/-moz-calc

一个DIV自动取其父宽度。 所以没有必要定义任何width 。 通常会这样写:

 div{ margin-right:50px; } 

检查这个小提琴

另一种select是绝对定位。

 div { position: absolute; left: 0; right: 50px; } 

小提琴

但是,Sandeep的解决scheme是您应该经常使用的解决scheme。 只是避免过度使用float 。 这防止元素自然地填充他们的容器。

我的解决scheme有和没有float: left

HTML:

 <div></div> 

CSS:

 div { height: 20px; background: black; float: left; width: 100%; padding-right: 50px; box-sizing: border-box; background-clip: content-box; }​ 

演示

兼容性:
Firefox 3.6,Safari 5,Chrome 6,Opera 10,IE 9

的jsfiddle

使用显示blockmargindisplay:block不与定义的height / width结合时将尝试填充它的父项。

 header { width:100%; background:#d0d0d0; height:100%; } h1 { display:block; border:#000 solid 1px; margin:0 50px 0 0; height:100px; } <header> <h1></h1> </header> 

是的,我们可以通过做

 #custom_div{ width:100%; margin-right:50px; } 

谢谢