div가 넘칠 경우 javascript로 스타일 적용하기

Question

내용이 오버 플로우되면 자바 스크립트로 컨테이너 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> 

나는 넘칠 경우, 동적 사업부의 하단에 "상자 - 그림자"를 추가하려면이 자바 스크립트 함수를했습니다. 작동하지 않습니다.

<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 윈도우 크기 조정 기능이 형편 없습니다.

더 좋은

$(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()로 해석 할 때 모바일 장치에서 사용하면 상황이 악화됩니다.

좋아요 ... 이제 물이 지금 내가 함께 작업 예를 넣었습니다 뭉개지되었는지 : http://jsfiddle.net/mori57/wV7Vt/

시계 출력 사업부에서

$(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(); 
}); 

당신은 실제로이 볼 수과 출력 창 주위로 프레임 막대를 드래그하여 값이 변경되는지 확인하십시오.

Answer 2

• ccolumsheight은 columsheight이어야합니다. 또는 columsheight은 columnsheight이어야합니다.

• class:"container"는 class="container"

• $('.colums')이 $('.columns')

당신은 오타 및 콘솔 오류를주의 해해야해야합니다!