帆布尺寸（JS？）

Question

我有一个比特的布局梦魇。我一直在试图为天才修好，我自己，但现在它来到这个....

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

我只是试图让帆布跨度时间线的整个长度，并我希望它在“所有站点”div上方结束，而不管它移动到哪个窗口。虽然我似乎无法实现这一点。我试过在JavaScript中无济于事。

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

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

P.S.时间线应该有一个左缘，我在JS实现：

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

^这表明了在我的项目，而不是在这里上的jsfiddle出于某种原因。但是在我的项目中，左边距似乎导致了水平溢出。我只想说时间表超过足够的移动的名称，那么它跨越了屏幕的水平长度的整个休息。我已经设定在100％，92％等宽度的CSS，和我的结果总是怪怪的。是否因为左边距这个百分比不起作用？

时间表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); 
});