帆布尺寸（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); 
});