Question

如果内容溢出，我正试图用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函数，如果它溢出，动态地将“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>

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

Answer 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();

更好的是，为了澄清你正在做的事情，并减少你第一次调整大小（）的几率，你应该做这样的事情。

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并在输出窗口周围拖动框条以观察值的变化。

Answer 2

ccolumsheight应为columsheight。或者甚至更好，columsheight应为columnsheight。
class:"container"应为class="container"
$('.colums')应为$('.columns')

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

如果div溢出，请使用javascript应用样式

2 个答案: