如果 div 溢出，则使用 javascript 应用样式答案

【问题标题】：Apply styling with javascript if a div overflows如果 div 溢出，则使用 javascript 应用样式
【发布时间】：2014-03-06 21:18:42
【问题描述】：

如果内容溢出，我正在尝试使用 javascript 设置容器 div 的样式。

我目前的代码是：

<div class="container" style="position: relative; height: 390px; margin-bottom: 90px; overflow-y: auto;">
     <div class="columns" style="height: auto; position: absolute;">
         some content
     </div> 
</div>

我已经制作了这个 javascript 函数，以便在 div 溢出时动态地将“box-shadow”添加到 div 的底部。它不工作。

<script>
    $(window).resize(function(){
    $('.container').css('height', $(window).height() - 200);
    var columsheight = $('.colums').height();
    var containerheight = $ ('.container').height() -200;
    if (containerheight < columsheight){
         $('.container').css({"box-shadow" : "inset 0px -13px 8px -10px #868686"});
        }
    else{};
}).resize();
</script>

我需要一些帮助来正确设置它。

【问题讨论】：

标签： javascript css overflow setattribute

【解决方案1】：

您看到脚本中的错字了吗？

 var columsheight = $('.colums').height();

根据您的标记，应该是：

 var columsheight = $('.columns').height();

哦。哎哟。更重要的是……您的整个 jQ 窗口大小调整功能状况不佳。您的 resize() 函数在完成其余处理之前关闭：

 $(window).resize(function(){
     $('.container').css('height', $(window).height() - 200);
     var columsheight = $('.columns').height();
     var containerheight = $('.container').height();
     if (containerheight < columsheight){
         $('.container').css("box-shadow","inset 0px -13px 8px -10px #868686");
     };
}).resize();

更好的是，为了澄清你在做什么，并减少你的第一次 resize() 没有被错过的机会，你可能应该做这样的事情。

function resizeContainers(){
     $('.container').css('height', $(window).height() - 200);
     var columsheight = $('.columns').height();
     // open your browser's console, and watch as your code executes
     // you should see a line written every time it goes through this function
     console.log(".columns height is: " + columsheight);
     var containerheight = $('.container').height();
     console.log("containerheight height is: " + containerheight);
     if (containerheight < columsheight) {
         $('.container').css("box-shadow","inset 0px -13px 8px -10px #868686");
     }
}

$(window).resize(resizeContainers);

resizeContainers();

这样，您可以在需要时独立调用该函数，而无需触发全窗口 resize() 事件。 window.resize() 事件特别敏感......它会被很多不同的东西触发，如果你在移动设备上使用它会变得更糟，因为一些移动浏览器将方向变化解释为 window.resize()。

好的......现在水已经变得浑浊了，我已经整理了一个工作示例：

$(function () {
    // create your method for checking the resize
    function resizeContainers() {
        // get a reference to the .container element and the .columns element
        var $container = $('.container');
        var $cols = $('.columns');
        // set the height on $container
        $container.css('height', $(window).height() - 200);
        // THis is just here so you can see, as you resize the frame, 
        // that this is testing the sizes 
        $("#output").html("$cols.height() : " + $cols.height() + "\n$container.height() : " + $container.height());
        // Now compare the height of the $cols item to the $container height
        if ($cols.height() > $container.height()) {
            $container.css("box-shadow", "inset 0px -13px 8px -10px #868686");
        } else {
            // this will remove the box shadow when the content does not exceed
            // the container height
            $container.css("box-shadow","");   
        }
    }

    // Now, tell the window object to listen for resize events and call resizeContainers
    $(window).resize(resizeContainers);
    // Call it manually once
    resizeContainers();
});

你可以在http://jsfiddle.net/mori57/wV7Vt/看到这个实践

观察输出 div 并在输出窗口周围拖动框架栏以观察值的变化。

【讨论】：

我已经更正了代码，现在我有了这个： $(document).ready(function resizeContainers(){ $('.container').css('height', $(window) .height() - 200); var el = document.getElementById('.container'); if (el.clientHeight
不。您不需要按照其他海报所说的去做...您正在使用 jQuery，您不需要 getElementById()，并且您正在尝试以 jQuery 样式向它传递一个类名，所以它不会无论如何都行不通。从我给你的开始，看看是否有效。如果没有，请开始在代码中调用 console.log() 并在调整窗口大小时观察浏览器中的 Javascript 控制台，以查看在调整大小期间触发了哪些值。
Uau！！这正是我需要的！不知道为什么在我的页面中不起作用。试图找出答案。啊!当我将窗口大小调整为较小的高度时，阴影才会出现。
您的 .columns div 中是否有足够的内容超过 .container div 的高度？如果没有，您将不会看到任何事情发生。我添加了文本只是为了让您可以看到如果有内容会做什么。在这一点上，我不知道我是否可以提供进一步的帮助，除非您可以在 JS 控制台中看到某种错误。祝你好运！
正如所写，它看起来像我期望的那样，在 Firefox 中......它添加了底部内框阴影。你在测试什么网络浏览器？

【解决方案2】：

ccolumsheight 应该是columsheight。或者更好的是，columsheight 应该是 columnsheight。
class:"container" 应该是class="container"
$('.colums') 应该是$('.columns')

您必须注意拼写错误和控制台错误！

【讨论】：