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

Dynamic height/max-height and overflow

本文关键字：高度 动态      更新时间：2023-09-26

我正在为我的应用程序创建一个任务管理器，我正在尝试计算小部件的高度，然后在它满足要求时采取措施。基本上，我想得到窗口的高度减去另一个数字，以获得任务小部件的最大高度（已经设置了最小高度）。然后我想动态地获得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语句将停止工作。

当

$（"#任务"）.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;
}

如有任何帮助，我们将不胜感激。提前谢谢。

每次调整窗口大小时，我都会使用以下命令：

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. 您也可以使用$('').height()作为setter！-->$('#tasks').height(th);

  2. 当使用$（''）.css（'height':myVal）时，请记住，您需要指定一个单位（例如px）。你现在不这么做。

  3. 是什么意思

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

当你解除警报时，你的其他分支没有做任何事情。

相关文章：