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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:23:40  来源:igfitidea点击:

CSS width/height pixel and percentage calculation combintaion?

csspixels

提问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 onresizeevent.

通过网络搜索后,我意识到这是不可能的。唯一的模拟方法是使用 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);

See http://hacks.mozilla.org/2010/06/css3-calc/

http://hacks.mozilla.org/2010/06/css3-calc/

回答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 

http://jsfiddle.net/4TG2Z/

http://jsfiddle.net/4TG2Z/

No javascript needed.

不需要javascript。