Html 是否可以在 CSS3 中使 div 50px 小于 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11093943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to make a div 50px less than 100% in CSS3?
提问by u283863
Is it possible to make a div50px less than 100% in pure CSS? I want the <div>to be only 50px less than 100%. I don't want any JavaScript.
是否可以div在纯 CSS中使50px 小于 100%？我希望<div>只有 50px 小于 100%。我不想要任何 JavaScript。
回答by u283863
Yes you can. Without using the IE's expression(), you can do that in CSS3 by using calc().
是的你可以。在不使用 IE 的情况下expression()，您可以在 CSS3 中使用calc().
div {
width: 100%;
width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% - 50px);
}
Demo: http://jsfiddle.net/thirtydot/Nw3yd/66/
演示：http: //jsfiddle.net/thirtydot/Nw3yd/66/
This will make your life so much easier. It is currently supported in the 3 main browsers: Firefox, Google Chrome (WebKit), and IE9: http://caniuse.com/calc
这将使您的生活变得更加轻松。目前支持 3 种主要浏览器：Firefox、Google Chrome (WebKit) 和 IE9：http: //caniuse.com/calc
回答by sandeep
回答by gilly3
Another alternative is absolute positioning.
另一种选择是绝对定位。
div {
position: absolute;
left: 0;
right: 50px;
}
But, Sandeep's solution is the one you should usually use. Just
avoid overusing float. This prevents elements from naturally filling their container.
但是，Sandeep 的解决方案是您通常应该使用的解决方案。只是避免过度使用float。这可以防止元素自然地填充它们的容器。
回答by Puyol
My solution works with and without float: left.
我的解决方案适用于和没有float: left.
HTML:
HTML：
<div></div>
css:
css：
div {
height: 20px;
background: black;
float: left;
width: 100%;
padding-right: 50px;
box-sizing: border-box;
background-clip: content-box;
}?
Compatibility:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9
兼容性：
Firefox 3.6、Safari 5、Chrome 6、Opera 10、IE 9
回答by Jason Lydon
Using display blockand margin. display:blockwhen not combined with a defined height/widthwill try to fill it's parent.
使用显示block和margin. display: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>
回答by Deepranshu
Yes we can do it by making
是的，我们可以通过制作
#custom_div{
width:100%;
margin-right:50px;
}
Thanks
谢谢
