有没有办法在CSS中添加和减去值?

时间:2011-12-27 10:06:09

标签: css height margin

我有一个div,我以负边距定位,但我希望它一直延伸到它的容器div的底部,所以我可以使用一个不仅随机结束的边框。如果你看http://kineticaid.com/k/home.php,你会明白我的意思。我不能仅以像素为单位扩展其高度,因为容器div的高度随页面动态变化。我想做的是这样的事情:

#rightcol {
float: right;
width: 225px;

height: 100% + 250px;

margin: -325px -25px 0 0;
}

基本上我问你是否可以在CSS中加减。谢谢!

3 个答案:

答案 0 :(得分:25)

是。 CSS3具有calc()功能。这适用于大多数浏览器的当前版本(http://caniuse.com/calc)。

height: calc( 100% + 250px );

演示: jsFiddle

HTML:

<div id="one"></div>
<div id="two"></div>

CSS:

div {
    border: 1px solid red;
    height: 100px;
}

#one {
    width: calc(50% + 20px);
}

#two {
    width: 50%;
}

输出:

enter image description here

答案 1 :(得分:0)

Sass并且很少有类似这样的功能,但是我认为你的要求必须用javascript或jquery来完成你的计算。

http://api.jquery.com/height/

答案 2 :(得分:0)

此问题的解决方案是"Faux Columns",但您需要稍微更改布局。