CSS画布上的最小高度(甚至是svg)有限制吗? [英] CSS min-height on canvas (or even svg) has a limit?

查看：44
本文介绍了CSS画布上的最小高度(甚至是svg)有限制吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设您在2个嵌套的flex中有几个<div>(一个用于列，另一个用于行)，以获得类似的内容:

Let's said you've a couple of <div> in 2 nested flex (one for column, the other for rows), in order to get something like:

您可以在任何方向上调整父级<div>的大小，一切都会按预期进行.

You can resize the parent <div>, in any direction, and everything works as expected.

注释<div>用

{
   /* flex: 1 1 0px */
   flex-grow: 1
   flex-shrink: 1
   flex-basis: 0px /* i.e. independant of content */
}


<html>
<style type="text/css">
  html,
  body {
    height: 100%;
    margin: 0px;
  }
  
  body {
    padding-left: 30px
  }
  
  span {
    display: block;
    margin-top: 30px
  }
  
  #dut {
    background-color: red;
  }
</style>

<body>
  <span id="info"></span>
  <div style="
        background-color: gray;
        height: 200px;
        width: 50%;
        resize: both;
        overflow: auto;" onresize="onResize()">

    <div style="
            height:100%;
            display:flex;
            flex-direction: column;
        ">

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
      </div>

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div id="dut" style="flex: 1 1 0px;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
      </div>

    </div>
  </div>

  <script>
    const dut = window.document.getElementById("dut");
    const info = window.document.getElementById("info");
    const cb = () => info.innerHTML = `size of RED element: ${dut.offsetWidth} x ${dut.offsetHeight}`
    new ResizeObserver(cb).observe(dut)
  </script>
</body>

</html>

如果您使用一个<div>元素(红色的一个标记为"dut"的元素)，并将其替换为<canvas>，您将得到:

If you takes one <div> element (the red one tagged "dut"), and you replace it with <canvas> you will get:

换句话说，红色元素不能在此处"300x150" 缩小

In other words the red element can't be shrinking under "300x150" here

我们应该能够使用min-height和min-width(在弹性计算之前的 )进行修复:

We should be able to fix this with min-height and min-width (which predate flex computation):

{
    background-color: red;
    min-width: 0;
    min-height: 0;
}

结果:

width现在是正确的，但是为什么不是高度?！

width is now correct, but why not the height ?!

<html>
<style type="text/css">
  html,
  body {
    height: 100%;
    margin: 0px;
  }
  
  body {
    padding-left: 30px
  }
  
  span {
    display: block;
    margin-top: 30px
  }
  
  #dut {
    background-color: red;
    min-width: 0;
    min-height: 0;
  }
</style>

<body>
  <span id="info"></span>
  <div style="
        background-color: gray;
        height: 200px;
        width: 50%;
        resize: both;
        overflow: auto;" onresize="onResize()">

    <div style="
            height:100%;
            display:flex;
            flex-direction: column;
        ">

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
      </div>

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <canvas id="dut" style="flex: 1 1 0px;"></canvas>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
      </div>

    </div>
  </div>

  <script>
    const dut = window.document.getElementById("dut");
    const info = window.document.getElementById("info");
    const cb = () => info.innerHTML = `size of RED element: ${dut.offsetWidth} x ${dut.offsetHeight}`
    new ResizeObserver(cb).observe(dut)
  </script>
</body>

</html>

我正在考虑一些解决方法(或多或少难看)，但我的问题更多是关于此行为的根本原因是什么?在其中还有另一个css标记，例如min-min-height?！?

I'm thinking of a bunch of workaround (more or less ugly), but my question more on what is the root cause of this behavior ? In there a another css tag like min-min-height ?!?

我注意到，在我的情况下，等于150像素的min-min-height实际上取决于您的浏览器，还取决于画布的height属性(并且对于viewBox属性<svg>)

I've notice that min-min-height which is equal to 150 pixels in my case actually depends on your browser, and also on canvas's height attribute (and will be something in regard of viewBox attribute for <svg>)

谢谢!!

推荐答案

如果您选中 MDN 您可以阅读:

If you check the MDN You can read:

高度

坐标空间的高度(以CSS像素为单位). 默认为150.

The height of the coordinate space in CSS pixels. Defaults to 150.

和

宽度

坐标空间的宽度(以CSS像素为单位). 默认为300.

The width of the coordinate space in CSS pixels. Defaults to 300.

您已经找到了一种计算宽度的方法，因为在flexbox world中，元素可以缩小以适合其父尺寸在主轴上(使用flex-shrink并添加min-width)，但是在交叉处没有收缩效果轴，您的代码等效于以下内容:

You already found a way to counter the width since in the flexbox world element can shrink to fit their parent size on the main axis (using flex-shrink and by adding min-width) but there is no shrink effect on the cross axis and your code is equivalent to the following:

  html,
  body {
    height: 100%;
    margin: 0px;
  }
  
  body {
    padding-left: 30px
  }
  
  span {
    display: block;
    margin-top: 30px
  }
  
  #dut {
    background-color: red;
    min-width: 0;
    min-height: 0;
    height:150px;
    width:300px;
  }

  <span id="info"></span>
  <div style="
        background-color: gray;
        height: 200px;
        width: 50%;
        resize: both;
        overflow: auto;" onresize="onResize()">

    <div style="
            height:100%;
            display:flex;
            flex-direction: column;
        ">

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
      </div>

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div id="dut" style="flex: 1 1 0px;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
      </div>

    </div>
  </div>

  <script>
    const dut = window.document.getElementById("dut");
    const info = window.document.getElementById("info");
    const cb = () => info.innerHTML = `size of RED element: ${dut.offsetWidth} x ${dut.offsetHeight}`
    new ResizeObserver(cb).observe(dut)
  </script>
</body>

</html>

我用一个尺寸为300x150的简单div替换了画布.宽度可以缩小，高度只能触发溢出，而永远不会缩小.

I replaced the canvas with a simple div having a dimension of 300x150. The width can shrink and the height can only trigger an overflow and will never shrink.

如果将高度设置为0，则将具有所需的位置，因为我们删除了高度限制，现在它的行为就像div(默认情况下，空div没有高度)

If you make the height 0 you will have what you want because we removed the height constraint and it now behave like a div (an empty div by default has no height)

html,
  body {
    height: 100%;
    margin: 0px;
  }
  
  body {
    padding-left: 30px
  }
  
  span {
    display: block;
    margin-top: 30px
  }
  
  #dut {
    background-color: red;
    min-width: 0;
    min-height: 0;
  }

<span id="info"></span>
  <div style="
        background-color: gray;
        height: 200px;
        width: 50%;
        resize: both;
        overflow: auto;" onresize="onResize()">

    <div style="
            height:100%;
            display:flex;
            flex-direction: column;
        ">

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
      </div>

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <canvas id="dut" style="flex: 1 1 0px;" height=0></canvas>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
      </div>

    </div>
  </div>

  <script>
    const dut = window.document.getElementById("dut");
    const info = window.document.getElementById("info");
    const cb = () => info.innerHTML = `size of RED element: ${dut.offsetWidth} x ${dut.offsetHeight}`
    new ResizeObserver(cb).observe(dut)
  </script>
</body>

</html>

或height:0;min-height:100%在CSS内，并保持固有尺寸不变，并能够在画布内绘制.

or height:0;min-height:100% inside the CSS and keep the intrinsic dimension unchanged and be able to draw inside your canvas.

html,
  body {
    height: 100%;
    margin: 0px;
  }
  
  body {
    padding-left: 30px
  }
  
  span {
    display: block;
    margin-top: 30px
  }
  
  #dut {
    background-color: red;
    min-width: 0;
    height: 0;
    min-height:100%;
  }

<span id="info"></span>
  <div style="
        background-color: gray;
        height: 200px;
        width: 50%;
        resize: both;
        overflow: auto;" onresize="onResize()">

    <div style="
            height:100%;
            display:flex;
            flex-direction: column;
        ">

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
      </div>

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <canvas id="dut" style="flex: 1 1 0px;" ></canvas>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
      </div>

    </div>
  </div>

  <script>
    const dut = window.document.getElementById("dut");
    const info = window.document.getElementById("info");
    const cb = () => info.innerHTML = `size of RED element: ${dut.offsetWidth} x ${dut.offsetHeight}`
    new ResizeObserver(cb).observe(dut)
  </script>
</body>

</html>

您甚至可以根据需要更新属性，其行为将相同:

You can even update the attribute like you want and it will behave the same:

html,
  body {
    height: 100%;
    margin: 0px;
  }
  
  body {
    padding-left: 30px
  }
  
  span {
    display: block;
    margin-top: 30px
  }
  
  #dut {
    background-color: red;
    min-width: 0;
    height: 0;
    min-height:100%;
  }

<span id="info"></span>
  <div style="
        background-color: gray;
        height: 200px;
        width: 50%;
        resize: both;
        overflow: auto;" onresize="onResize()">

    <div style="
            height:100%;
            display:flex;
            flex-direction: column;
        ">

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
      </div>

      <div style="
            flex: 1 1 0px;
            display:flex;
            flex-direction: row;
            ">
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <canvas id="dut" style="flex: 1 1 0px;" heght="600" width="600"></canvas>
        <div style="flex: 1 1 0px; background-color: gray;"></div>
        <div style="flex: 1 1 0px; background-color: chocolate;"></div>
      </div>

    </div>
  </div>

  <script>
    const dut = window.document.getElementById("dut");
    const info = window.document.getElementById("info");
    const cb = () => info.innerHTML = `size of RED element: ${dut.offsetWidth} x ${dut.offsetHeight}`
    new ResizeObserver(cb).observe(dut)
  </script>
</body>

</html>

这篇关于CSS画布上的最小高度(甚至是svg)有限制吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆