在CSS中引用另一个元素/在CSS中做数学

Question

我有两个

div

嵌套在

div

内。

<div id='outer' class='one'>
    <div id='inner'></div>
    <div id='button' class='bttn'>Click me!</div>
</div>

外部

div

的高度是页面的百分比。我希望内部

div

的高度之一与外部

div

（即

$('#inner').height($('#outter').height() - 35)

）有一个固定的差异，因为第二个内部

div

本质上是一个具有固定高度 (35) 的按钮。我希望即使当我改变高度时也会发生这种情况（通过 CSS 触发器（：悬停/添加类/等，以便我可以使用过渡）或其他方式）。

我用谷歌搜索了一下，发现 Less 可能是一个答案，但据我所知，它会编译为静态值，但我仍然需要使用百分比，因为我希望这个应用程序在任何屏幕尺寸上都能工作/感觉相同.

我在一些 jsfiddles 中提供了我当前正在做的事情/我如何思考它的示例。

当前的“解决方案”：http://jsfiddle.net/L9NVj/5/（最终高度是我想要的，但过渡看起来很糟糕）

理想的“解决方案”：http://jsfiddle.net/L9NVj/6/（末端高度错误，但内部

div

适当拥抱）

潜在的解决方案：http://jsfiddle.net/L9NVj/7/（这会在单击时隐藏内部

div

，然后在达到适当大小时再次显示）

任何帮助/想法/见解将不胜感激！

Answer 1

考虑绝对定位内部元素，因为外部元素的大小不受其大小/位置控制。

#inner {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 35px;
    /* ... */
}

.bttn {
    position: absolute;
    bottom: 2px;
    left: 2px;
    /* ... */
}

示例：http://jsfiddle.net/L9NVj/9/

Answer 2

绝对定位冲突怎么样？为此，您只需设置

#inner

元素的顶部、底部、左侧和右侧，然后进行过渡。这将保持元素边缘周围的距离，并允许其他定位。

请注意，虽然在这种情况下您不需要实际计算值，但将来，

calc()

可以用于计算CSS中的动态值。在这种情况下，您可以执行类似

height: calc(100% - 37px);

的操作来获得相同的效果。

Answer 3

CSS3 的

calc()

就是您正在寻找的答案，结合不支持

calc()

的浏览器的 JavaScript 后备。在“理想解决方案”小提琴中，将 CSS 高度定义更改为以下内容：

height: -webkit-calc(100% - 35px);
height: calc(100% - 35px);

虽然通常您应该包含所有前缀（并且您可能仍然需要，具体取决于您的浏览器支持级别），但根据 Can I Use，当前唯一需要前缀的浏览器是

-webkit

浏览器。

我将利用这些知识做如下：获取一个功能检测脚本，我真的很喜欢 Modernizr 并检测

calc()

在浏览器中是否可用。 Modernizr 有一个 非核心检测

calc()

您可以使用。在 CSS 文件中使用该 CSS 作为默认值，然后使用资源加载器，例如 yepnope（Modernizr 附带），如果

calc()

不可用，则加载 JS 解决方案。

在您的 JavaScript 解决方案中，我可能会建议您使用“潜在解决方案”选项，但不要使用 jQuery 的

hide()

和

show()

，而是将不透明度设置为 0 和 1，并使用 CSS3 过渡在两者之间进行过渡。我也不会依赖超时，而是使用

transitionend

JavaScript 事件。

Answer 4

我编辑了你的第一个jsfiddle，我想这就是你想要的。刚刚添加了一行。

$(window).resize(function(){$('#inner').height($('#outter').height() - 35)});

jsfiddle：http://jsfiddle.net/Qqb3g/

您可能需要一些解决方法才能在单击按钮时使过渡顺利。

Answer 5

你需要计算内部div的%，这样它就可以调整属于外部div的大小，将你的js代码更改为这样：

 //calculating inner div'x height in % of outer
$('#inner').height((100 - (33/$('#outter').height() * 100)) + '%');
$('#button').click(function () {
    $('#outter').toggleClass('two');
});

尝试一下DEMO