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

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

html css

Html 如何强制此div跨越视口的高度？,html,css,Html,Css,这说明了问题所在。我没有设法防止div0div与其同级div1的上边距“崩溃”。（下面是HTML。）我希望div0垂直跨越整个视口，其中的红色rect与视口的左上角齐平。（div1及其内容的位置完全符合要求，不应以任何方式进行更改。）我曾尝试通过在div0和div1周围放置边框来禁用边距的折叠，但是，正如jsFiddle所示，这并没有什么不同以下是相关的HTML： <!doctype html> <body> <div id="div0">

这说明了问题所在。我没有设法防止

div0

div与其同级

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>

可以使用vh作为视口高度

这里有一个解决方案。我添加了一个

.wrapper

类，带有

绝对位置

位置

，以包含元素并保持文档的弹性。我还向您的

div0

id添加了

overflow:hidden

，以防止红色的

svg

rect

从包含

div

的id中流出

下面是一个更新的>>>JSFiddle好的，我找到了解决方案：注释掉

主体

CSS中的

位置：relative

。这在最初的小提琴中得到了说明。请注意，此小提琴与原始小提琴之间的唯一区别是刚才提到的注释掉的那一行

（我很惭愧地说，我通过盲目的尝试和错误找到了这个解决方案；我不知道为什么新版本可以工作，而原来的版本不能。）

有趣的想法，但是您是否在我提供的JSFIDLE中测试了它？（这就是提供JSFIDLE的要点，你知道…）有趣的是：你的解决方案是有效的，但不是因为你描述的原因，因为在CSS中你使用选择器

.wrapper

，而在HTML中你有

id=wrapper

，而不是

class=wrapper

。瞧，

.wrapper

的CSS没有任何效果。我最终发现（并刚刚发布）了一个（我认为）更接近目标的解决方案。

#div0 {
height:100vh;
}

<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>

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