Question

我有两个div嵌套在div内。

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

outter div的高度是页面的百分比。我希望其中一个内部div的高度与外部div（即$('#inner').height($('#outter').height() - 35)）有一个固定的差异，因为第二个内部div本质上是一个高度固定的按钮（35）。即使我改变高度（通过CSS触发器（：hover /添加类/等等，所以我可以使用Transitions）或其他），我也希望这种情况发生。

我google了一下，看到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

conflicting absolute positioning怎么样？要做到这一点，您只需要设置#inner元素的顶部，底部，左侧和右侧，然后转换它们。这将保持元素边缘周围的距离，并允许其他定位。

请注意，虽然在这种情况下您不需要实际计算值，但将来calc()可用于计算CSS中的动态值。在这种情况下，您可以执行height: calc(100% - 37px);之类的操作来获得相同的效果。

Answer 3

CSS3's calc()是您正在寻找的答案，与不支持calc()的浏览器的JavaScript后备相结合。在您的“理想主义解决方案”小提琴中，将CSS高度定义更改为以下内容：

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

虽然通常您应该包括所有前缀（根据您的浏览器支持级别，您仍可能需要），但根据Can I Use，当前需要添加前缀的唯一浏览器是-webkit个浏览器。

我将使用以下知识做什么：获取功能检测脚本，我非常喜欢Modernizr并检测浏览器中是否有calc()可用。 Modernizr有non-core detect for calc()你可以使用。在CSS文件中使用CSS作为默认值，然后使用资源加载器，如yepnope（Modernizr附带），如果calc()不可用，则加载JS解决方案。

在你的JavaScript解决方案中，我可能会建议你的“潜在解决方案”选项，但不是jQuery的hide()和show()，而是将不透明度设置为0和1并使用CSS3过渡来转换他们俩。我也不依赖于超时，而是使用transitionend JavaScript event。

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

引用CSS中的另一个元素/在CSS中进行数学运算

5 个答案: