时间轴CSS：

Question

我有点布局噩梦。我已经尝试了几天来自己解决它，但现在它已经到了这个......

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

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

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

P.S。时间轴应该有一个左边距，我在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);
});

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

时间轴CSS：

时间轴js：

1 个答案: