Question

此jsFiddle显示问题。我没有设法阻止div0 div将其上边距与其兄弟div1“折叠”。（下面的HTML。）

我希望div0垂直跨越<em>整个视口，其中的红色rect显示为与视口的左上角齐平。（div1及其内容的位置完全符合要求，不应以任何方式更改。）

我试图通过在div0和div1周围放置边框来禁用边距的折叠，但是，正如jsFiddle所示，这没有任何区别。

以下是相关的HTML：

<!doctype html>
<body>
    <div id="div0">
        <svg id="svg0" width="50px" height="50px">
            <g>
                <rect x="0px" y="0px"
                      width="50px" height="50px" style="fill:red;"></rect>
            </g>
        </svg>
    </div>

    <div id="div1">
        <div id="div2">
            <svg id="svg1" width="100px" height="100px"></svg>
        </div>
    </div>

Answer 1

这是一个适合您的解决方案。我添加了一个.wrapper类，其中包含absolute position，用于包含元素并保持文档的弹性。我还在overflow: hidden个ID中添加了div0，以防止红色svg rect在div之外流动。

这是更新的>>>JSFiddle<<<

HTML：

<div class="wrapper">
    <div id="div0">
        <svg id="svg0" width="50px" height="50px">
            <g>
                <rect x="0" y="0" width="50px" height="50px"></rect>
            </g>
        </svg>
    </div>
    <div id="div1">
        <div id="div2">
            <svg id="svg1" width="100px" height="100px"></svg>
        </div>
    </div>
</div>

CSS：

body {
    margin: 0;
    padding: 0;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
#div0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background-color: yellow;
    border: 1px solid blue;
    overflow: hidden;
}
#div1 {
    margin-top: 20px;
    border: 1px solid green;
    background: lightgray;
    min-height: 27px;
    display: -webkit-flex;
    display: flex;
}
#div2 {
    background: black;
    margin: 0px auto;
}
rect {
    fill: red;
}

Answer 2

#div0 {
height:100vh;
}

您可以将vh用于视口高度。

Answer 3

好的，我找到了解决方案：在position:relative的CSS中注释掉body。这在原始小提琴的this revision中有所说明。请注意，它与原始小提琴之间的唯一区别是刚才提到的注释掉的行。

（我很惭愧地说我通过盲目的反复试验找到了这个解决方案;我不知道为什么新版本有效并且原始版本没有。）

如何强制此div跨越视口的高度？

3 个答案: