2

我试图保持一个svg:rect大小以完全适合可见视口（具有 20px 边距），而不管调整所述视口的大小。我正在与 JS (和朋友) 1一起做这件事，但我发现这种方法不是很健壮(就此而言，也不是特别敏感)。（例如，在难以重现的情况下，其中一个边距的大小是应有的两倍大，或者没有明显原因弹出垂直滚动条。）

但是这篇文章的目的不是为了找到更好的 JS 来解决这个问题，因为我确信这个问题真的不是 JS 的工作；它应该通过合适的 CSS 规范来处理。（我求助于 JS 的唯一原因是我用 CSS 做的所有努力都失败了，但话又说回来，我知道我受到了严重的 CSS 挑战。）

所以我的问题是：什么是合适的 CSS？

1为了完整起见，这个jsFiddle显示了（虽然不是很准确，不幸的是）我现在正在做的事情，但它的本质在这个 JS 片段中：

(function ($) {
  var margin = 20,
      viewport = document.documentElement,
      canvas = d3.select('#canvas'),
      voodoo = 5,   // wards off evil v-scrollbar spirits
      hmargin = 2 * margin,
      vmargin = 2 * margin + voodoo;

  $('body').css('margin', margin);
  resize_canvas();
  $(window).on('resize orientationChanged', resize_canvas);

  function resize_canvas () {
    canvas.attr({width: viewport.clientWidth - hmargin,
                 height: viewport.clientHeight - vmargin});
  }
})(jQuery);
4

1 回答 1

1

我认为你可以通过纯 css 实现你想要的

如果您在您的周围添加一个容器svg并将以下属性添加到您的rect：

<div id="margin-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect id="canvas" width="100%" height="100%" style="fill:rgb(255,255,255);"></rect>
    </svg>
</div>

您可以使用以下 CSS：

html {height:100%;}
body,
html {padding:0; margin:0; background:black; position:relative; width:100%; min-height:100%;}
#margin-container {position:absolute; top:20px; right:20px; left:20px; bottom:20px;}
svg {width:100%; height:100%;}

例子

于 2013-11-05T10:54:10.123 回答