CODEWITHSUNDEEP
htmlcss
kjo
kjo

Reputation: 35321

How to force this div to span the height of viewport?

This jsFiddle shows the problem. I have not managed to prevent the div0 div from "collapsing" its top margin with that of its sibling, div1. (HTML below.)

I want div0 to span the entire viewport vertically, and the red rect inside it to appear flush against the top left corner of the viewport. (The placement of div1 and its contents is exactly as desired, and should not be changed in any way.)

I have tried to disable the collapsing of margins by putting borders around both div0 and div1, but, as the jsFiddle shows, this has made no difference.

Here's the relevant 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>

Upvotes: 0

Views: 1048

Answers (3)

Overflow Stack
Overflow Stack

Reputation: 833

Here is a solution for you. I added a .wrapper class, with a absolute position, to contain the elements and maintain elasticity in your document. I also added overflow: hidden to your div0 id to prevent the red svg rect from flowing outside of that containing div.

Here is an updated >>>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;
}

Upvotes: 1

kjo
kjo

Reputation: 35321

OK, I found the solution: comment out the position:relative in the CSS for body. This is illustrated in this revision of the original fiddle. Notice that the only difference between this and the original fiddle is the commented-out line just mentioned.

(I'm ashamed to say that I found this solution by blind trial-and-error; I have no idea of why the new version works and the original one didn't.)

Upvotes: 0

jono
jono

Reputation: 1842

#div0 {
height:100vh;
}

You can use the vh for viewport height.

Upvotes: 0

Related Questions