动态高度/最大高度和溢出

时间:2012-08-27 22:11:48

标签: javascript jquery css

我正在为我的应用创建一个任务管理器,我正在尝试计算小部件的高度,然后在满足要求时执行某些操作。基本上我想要获得窗口的高度减去另一个数字以获得任务小部件的最大高度(已经设置了最小高度)。然后我想动态获取div的实际高度,如果它等于最大高度,我想要更改几个css属性。我正在使用jquery 1.5.2来做到这一点。这就是我的......

$(document).ready(function() {
//Get the height for #tasks
var tH = Math.round($(window).height() - 463);
$('#tasks').css('height', tH); //Make it the max height
var ti = Math.round($("#tasks").height()); //Get actual height of #tasks

if(tH==ti){ // If #tasks actual height is equal to the max-height than do...
    //alert('true');
    $('.taskItems').css('width', '172px');
    $('.tT, .tD').css('width', '135px');
    console.debug(ti + ' ' + tH);
}else{
    alert(tH + ' ' + ti); 
    console.debug(ti + ' ' + tH);
}
});

只要“alert('true')”首先触发,“max-height”更改为“height”,此功能就会很好即可。

当警报被注释掉时,if语句停止工作。

  

$(“#tasks”)。css('height',tH)更改为$(“#tasks”)。css('max-height',tH)

价值疯狂地关闭。示例:78/130。 css如下......

#tasks {
    border:1px solid #D1D1D1;
    border-top:none;
    color:rgb(82,124,149);
    display:inline-block;
    font-size:12px;
    margin:0px 0px 0px 1px;
    overflow:auto;
    width:194px;
}

任何帮助将不胜感激。提前谢谢。

2 个答案:

答案 0 :(得分:1)

每次调整窗口大小时我都会使用以下内容:

jQuery(document).ready(function () {

    jQuery(window).resize(function () {
        //alert("window changed");
        resizeDivs();
    });
});

function resizeDivs() {
    var clientWidth = jQuery(window).width();
    var clientHeight = jQuery(window).height();
    var newHeight = 100;
    var newWidth = 100;

    var firstDatasegment = jQuery(".datasegment")[0];

    if (!jQuery(firstDatasegment).width()) {
        currentWidth = jQuery(firstDatasegment).clientWidth;
        newHeight = currentWidth - (currentWidth / 7);
        newWidth = currentWidth;
    }
    else {
        //currentWidth = jQuery(".datasegment")[0].css("width");
        currentWidth = jQuery(firstDatasegment).width();
        newHeight = currentWidth - (currentWidth / 7);
        newWidth = currentWidth;
    }

    jQuery(".datasegment").height(newHeight);
    jQuery(".sidemenu").height(clientHeight);
    jQuery(".maindatacontent").height(clientHeight);
    jQuery(".text-glow").css("font-size", (clientWidth / 50) + "px");
    jQuery(".hovermenuicon .menudesc").not('.bucketText').css("font-size", (clientWidth / 50) + "px");
    jQuery("td.menudesc span:first-child").not('.bucketText').css("font-size", (clientWidth / 50) + "px");
    jQuery(".sidemenudesc").css("font-size", (clientWidth / 80) + "px");
    jQuery(".datavalue").css("font-size", (clientWidth / 80) + "px");
    jQuery(".mainmenuitem").css("font-size", (clientWidth / 50) + "px");
    jQuery(".qireportgridview table").css("font-size", (clientWidth / 80) + "px");
    jQuery(".scrolldivbig").height(clientHeight);
}

为了让我能够为您提供更多帮助,我需要查看您最基本的HTML,然后我会使用工作样本更改相应的代码。

HTH

答案 1 :(得分:1)

  1. 您也可以使用$('').height()作为制作者! - > $('#tasks').height(th);

  2. 使用$('')。css(' height':myVal)时请记住,您需要指定一个单位(例如px)。你现在不做。

  3. 你是什么意思

  4.   

    当警报被注释掉时,if语句停止工作。

    当您取消警报时,您的其他分支机构没有做任何事情。