0

这个jsFiddle显示了这个问题。我没有设法阻止div0div 与其兄弟的div1. （下面的 HTML。）

我想垂直div0跨越整个视口，并且其中的红色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>
4

3 回答 3

1

这是为您提供的解决方案。我添加了一个.wrapper带有absolute position, 的类来包含元素并保持文档中的弹性。我还添加overflow: hidden到您的div0id 以防止红色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;
}
于 2013-11-05T03:31:53.223 回答
0

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

（我很惭愧地说我是通过盲目的反复试验找到了这个解决方案；我不知道为什么新版本可以工作而原来的版本不行。）

于 2013-11-05T11:47:57.153 回答
0 
#div0 {
height:100vh;
}

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

于 2013-11-05T02:53:23.050 回答