CSS CSS宽度/高度像素和百分比计算组合?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1961200/
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
CSS width/height pixel and percentage calculation combintaion?
提问by thedp
Is there a way to set the height/width CSS properties to something like that: 100% - 50px So if the total 100% is 1000px, then the end result would be 950px. And the 100% is set by the browser size.
有没有办法将高度/宽度 CSS 属性设置为这样的:100% - 50px 所以如果总 100% 是 1000px,那么最终结果将是 950px。100% 是由浏览器大小设置的。
UPDATE: What I'm trying to do is:
更新:我想做的是:
I have two div, the first div's height is 50px, I would like the second div's height to cover the remaining space.
我有两个 div,第一个 div 的高度是 50px,我希望第二个 div 的高度覆盖剩余空间。
采纳答案by thedp
After search though the net, I realized that it can't be done.
The only way to simulate is to adjust it with JavaScript and onresize
event.
通过网络搜索后,我意识到这是不可能的。唯一的模拟方法是使用 JavaScript 和onresize
事件进行调整。
回答by patricjansson
There is a solution in css3, and I also actually think it has been supported in IE for sometime.
css3里面有一个解决方案,其实我也觉得IE支持已经有一段时间了。
Example:
例子:
width: -moz-calc(25% - 1em);
回答by Matijs
Not with width itself.
不与宽度本身。
You have to set either the margins and / or the paddings left and right to a total of 50px.
您必须将边距和/或左右边距设置为总共 50 像素。
回答by Guffa
If you want this for the whole page:
如果您希望整个页面都这样:
body { margin: 0; padding: 25px; }
That will give you a padding at the top and the bottom also. If you don't want that you can set them to zero:
这也将为您提供顶部和底部的填充。如果你不想要,你可以将它们设置为零:
body { margin: 0; padding: 0 25px; }
Note: Most browsers use a default margin for the body, but some (Opera) use a default padding instead, so you should always specify both the margin and padding for the body.
注意:大多数浏览器为正文使用默认边距,但有些(Opera)使用默认填充来代替,因此您应该始终为正文指定边距和填充。
回答by Sergio Morstabilini
In the second div set
在第二个 div 集中
top=50px,
bottom=0
position=absolute
No javascript needed.
不需要javascript。