Question

只是想知道如何在div中设置2个div的高度，并保持灵活的jQuery响应横幅。

所以横幅的最大高度为450px，但一旦屏幕尺寸减小，图像的高度会减小，导致周围的颜色，导致周围的颜色减少，然后横幅div就会减少。

然后我有两个div绝对定位，一个在右上角，另一个在右下角。

我想获得横幅高度的高度，然后将右上角div设置为70％，将右下角div设置为30％。

这是否也可以在重新调整时完成，而不仅仅是在运行时？

任何指示赞赏。

由于杰夫

Answer 1

这很简单，因为你只需要：

捕获这些元素
循环播放
从每个家长那里获取信息
将该信息反馈给它的风格

要设置HTML，我建议您找到一个好的网格系统（例如：960）。这样，父母总是控制百分比，并且变得易于管理。

<div class="row">
    <div class="column g70">
        <div class="inner" data-dom="height"></div>
    </div>
    <div class="column g30">
        <div class="inner" data-dom="height" data-dom="width"></div>
    </div>
</div>

这允许您选择是仅要控制高度还是宽度。当您使用响应性时，宽度对于之前添加的CSS样式也很重要。根据我的经验，响应式谷歌地图是使用data-dom="width"属性的完美示例。

在JavaScript中设置它的最佳方法是创建一个处理函数。就像你使用最着名的等高脚本一样。在jQuery中给你一个未经测试的例子：

// @param {Object} elements: jquery selector ($('[data-dom]'))
function dimensionHandler(elements){
    elements.each(function(){
       var el = $(this),
           parent = el.parent(),
           isWidth = el.data('dom') === 'width',
           isHeight = el.data('dom') === 'height',
           defW = '100%',
           defH = 'auto',
           w = isWidth ? parent.width() : defW,
           h = isHeight ? parent.height() : defH;

       el.css({
           width: w || defW, // if width was 0 use 100%
           height: h || defH // if height was 0 use auto
       });
   });
}

使用默认的css值作为备份，您可以绕过隐藏的元素。现在你只需要设置一些事件，并调用处理函数。

$(function(){
   var win = $(window),
       elements = $('[data-dom]');

   win.on('load', function () {
       dimensionHandler(elements);
   });

   win.on('resize', function () {
       //throttle(function () {
           dimensionHandler(elements);
       //}, 200);         
   });
});

注意我注释了一个throttle/debounce函数。由于resize事件以快速的速度运行，因此有助于减慢此处理函数的执行速度。并让您的浏览器/设备在浏览器重排之前窒息一下。我将把油门/去抖动选项留给你。 GL！

jQuery基于外部设置内部div的高度

1 个答案: