基于外部 div 测量值的画布尺寸（js？）

Question

我的布局有点噩梦。几天来我一直在尝试自己修复它，但现在它变成了这个......

http://jsfiddle.net/Osceana/yQ3As/2/

我只是想让画布跨越该时间线的整个长度，并且我希望它在“所有站点”div 上方结束，无论它移动到哪个窗口。我似乎无法做到这一点。我在javascript中尝试过，但无济于事。

$("#chart").height(
canvasHeight);

$("#chart").width(
timelineWidth);

附：时间线应该有一个我在 js 中实现的左边距：

$("#timeline").css(
    "margin-left", namesWidth);

^ 这出现在我的项目中，但由于某种原因没有出现在 jsfiddle 上。但是在我的项目中，左边距似乎导致水平溢出。我只想让时间轴移动到足以容纳名称的位置，然后它跨越屏幕水平长度的整个其余部分。我将 CSS 的宽度设置为 100%、92% 等，但结果总是很奇怪。是因为左边距百分比不起作用吗？

时间线 CSS：

    #timeline {
    font-size:15px;
    color:black;
    font-family:Calibri;
    text-align:center;
    margin-top:60px;
    width:100%;
}
    #timeline td {
    width: 4%;
}

时间线js：

var namesWidth = $("#names").width()

$("#timeline").css(
    "margin-left", namesWidth);

*感谢您非常提供任何和所有的见解。我希望我没有要求太多。

Answer 1

Live Demo

Editor

你没有设置你的小提琴来使用 jQuery。下面应该可以让你接近你需要的东西。

var $chart = $("#chart"),
    spacing = 40,
    canvasHeight = $("#company").position().top - $chart.position().top - spacing,
    windowWidth = $(window).width(),
    namesWidth = $("#names").width();

$chart.width($("#timeline").width());
$chart.height(canvasHeight);

$("#timeline").css("margin-left", namesWidth);
$chart.css("margin-left", namesWidth);

// change on resize
$(window).resize(function () {
    canvasHeight = $("#company").position().top - $chart.position().top - spacing;
    $chart.height(canvasHeight);
});