Css 正在寻找一种更可靠的方法来自动调整视口内容的大小

我试图保持一个

svg:rect

的大小，使其完全适合可见视口（具有20px的边距），而不考虑所述视口的大小。我用JS（和friends）1来做这件事，但我发现这种方法不是很健壮（也不是特别灵敏）。（例如，存在一种很难重现的情况，其中一个边距的大小是其应有大小的两倍，或者在没有明显原因的情况下弹出垂直滚动条。）

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

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

---

1为了完整起见，这个显示了我现在正在做的事情（不幸的是不是非常准确），但它的实质是在这个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);

---

我认为你可以通过纯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>

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%;}