Question

我一直在困惑这个HTML / CSS几个小时，我无法弄清楚我哪里出错了。这是一个更复杂的布局的一部分，但我想我已经解决了这个问题。

这是我的HTML：

<table>
    <tr>
        <td>
            <div class = "outer">
                <div class = "middle">
                    <div class = "inner">
                        <svg viewbox = "0, 0, 250, 250">
                        </svg>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

...这是我的CSS：

* {
    margin: 0px;
    padding: 0px;
}
body,html {
    height: 100%;
    font-family: sans-serif;
    font-size: 12px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;      
    -webkit-text-size-adjust: none; 
}
table {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    min-width: 600px;
    /*table-layout: fixed;*/
    border-collapse: collapse;
    border-spacing: 0;
}

tr {
    background-color: #ffffff;
    height: 100%;
    height: calc(100% - 190px);
}

td {
    height: 100%;
    background-color: red;
    margin: 0;
}

.outer {
    width: 94%;
    width: calc(100% - 20px);
    height: 94%;
    height: calc(100% - 20px);
    background-color: blue;
    display: block;
    margin: 3%;
    margin: calc(10px + 0%);
    overflow-y: scroll;
}
.middle {
    display: white;
    background-color: lightblue;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    height: calc(100%  - 10px - 2.5rem);
    overflow-y: scroll;
}

.inner {
    background-color: pink;
    display: block;
    width: 40%;
    height: 100%;
    overflow: hidden;
}

svg {
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    background-color: salmon;
}

如果删除SVG，div和table的行为与我想要的一样 - 在窗口调整大小时，表格不会超过页面大小，而div则相应地缩放。

当你包含svg时，我期望（以及我想要的）是svg缩放以适合.inner div，但不要超过它或以任何方式改变布局的流程。这不是发生的事情。

我在Safari和Firefox中检查了这一点，两者都给了我意想不到但不同的结果。在firefox中，如果窗口缩小超过某个点，则svg高度会扩展，整个窗口最终会滚动。

在Safari中，svg高度会随着宽度的变化而变化，但宽度不会随着高度的变化而变化。

这看起来很简单，我不知道自己哪里出错了。我确信这是某种明显的菜鸟错误。我已经在svg上尝试了每个最大/最小高度/宽度的组合。

感谢您的帮助！

编辑：如果我摆脱了表（删除表，td，tr），一切都按预期工作。同样，如果我摆脱svg并保留表格，一切都按预期工作。

Answer 1

作为stated here，您无法为svg元素设置auto的宽度/高度值。使用100%代替高度和宽度，如下所示：

svg {
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    background-color: salmon;
}

如果问题仍然存在，请尝试将height和width属性作为内联样式声明添加到svg，并查看是否可以解决问题：

<svg style="width:100% max-width:100%; height: 100%; max-height: 100%;" viewbox = "0, 0, 250, 250"></svg>

Answer 2

你错过了tbody

的高度

tbody {
    height: 100%;
}

实际上，如果你不添加，浏览器会自动在你的表中添加tbody。你可以在inspect元素

中看到这个

即使父级已设置高度，元素也不会响应高度设置为百分比

2 个答案: