1

我有两个divs 嵌套在一个div.

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

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

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

我在一些 jsfiddles 中有我目前正在做什么/我是如何考虑它的例子。

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

理想主义的“解决方案”：http: //jsfiddle.net/L9NVj/6/（末端高度错误，但内部div拥抱适当）

潜在的解决方案：http: //jsfiddle.net/L9NVj/7/（这会在点击时隐藏内部div，然后在达到适当大小时再次显示）

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

4

5 回答 5

4

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

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

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

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

于 2013-10-02T15:46:16.373 回答
1

绝对定位冲突怎么样。为此，您只需要设置#inner元素的顶部、底部、左侧和右侧，然后转换它们。这将保持元素边缘周围的距离，并允许其他定位。

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

于 2013-10-02T15:47:08.297 回答
1

CSS3calc()是您正在寻找的答案，结合 JavaScript 后备不支持的浏览器calc()。在您的“理想解决方案”小提琴中，将您的 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()and show()，将 opacity 设置为 0 和 1 并使用 CSS3 过渡在两者之间进行过渡。我也不会依赖超时，而是使用transitionendJavaScript 事件。

于 2013-10-02T16:42:45.980 回答
0

您需要以 % 为单位计算内部 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

于 2013-10-02T16:13:56.407 回答
0

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

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

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

单击按钮时，您可能需要一些解决方法才能使过渡平滑。

于 2013-10-02T15:51:06.673 回答