CSS table 和父级 div 没有遵循它们的高度和宽度属性？ Jquery 可调整大小

Question

我在 div(graphdiv) 里面有一个 table(graphtable) 在 div(half) 里面。

当我使用 jquery resizable 缩小一半时，graphtable 和 graphdiv 的大小都会增加。然而，使用 google 开发人员工具，这些元素的实际 css 已更改为正确的大小。

在最下方的 div table 内是一个 dygraph，当对其 class.

调用调整大小函数时，它应该调整到它的父级

我很困惑 css 怎么能说一套，而我却能看到另一套？

for(var i = 0; i<graphArray.length-1; i++){
    $( "#"+i ).resize(function() {
        var height = $(this).height();
        var width = $(this).width();
        $(this).find(".graph").height(height);
        $(this).find(".graph").width(width*0.68);
        $(this).find(".graph").find(".graphtable").height(height);
        $(this).find(".graph").find(".graphtable").width(width*0.68);
        window.graphArray[$(this).attr('id')].resize();
    });
}

.half{
background-color:#F2F2F2; 
width:48%;
height:50%;
border: 1px solid;
margin-top:1%;
float:left;
}
.graph{
width: 68%;
height: 100%;
float: left;
display:table;
}
.graphtable{
background-color:#F5F5F5; 
width:100%;
height:100%;
}

<?php
echo "<div class='half' id='$i' name='".$graph['graph_id']."' style='position:absolute; top:".$top."px; left:".$left."px'>";
echo "<div id='graph' class='graph'>";
echo "<table id='graphtable$i' class='graphtable' style='width:100%; height:100%'></table>";
echo '</div>';
echo '<div class="dragger">Drag</div>';
echo '<div class="resizer">+</div>';
echo '</div>';
?>

我在图 div 和 graphTable 上都尝试过使用 .atrr，但运气不好。

Answer 1

dygraphs 仅在 window 调整大小时重绘。（不幸的是，它无法监听更一般的 <div> 调整大小的事件）。

您可以通过在 dygraph 上调用 resize() 告诉它重新检查其包含的 div.

来解决这个问题

Answer 2

显然还有一个额外的 div 绑定了 dygraph，所以我在下面添加了两行来解决调整大小问题。我确信有更好的方法来完成我在这里所做的事情，但目前它有效。我会在稍后处理性能

for(var i = 0; i<graphArray.length-1; i++){
    $( "#"+i ).resize(function() {
        var height = $(this).height();
        var width = $(this).width();
        $(this).find(".graph").height(height);
        $(this).find(".graph").width(width*0.68);
        $(this).find(".graph").find(".graphtable").height(height);
        $(this).find(".graph").find(".graphtable").width(width*0.68);
        $(this).find(".graph").find(".graphtable").find("div").width(width*0.68); //added
        $(this).find(".graph").find(".graphtable").find("div").height(height); //added
        window.graphArray[$(this).attr('id')].resize();
    });
}

CSS table 和父级 div 没有遵循它们的高度和宽度属性？ Jquery 可调整大小

CSS table and parent div not following their height and width attributes? Jquery resizable

javascript

jquery

html

css

dygraphs