CODEWITHSUNDEEP
htmlcss
Jack Hanna
Jack Hanna

Reputation: 167

CSS Position Fixed Maintain Height

I have a div with content and an outter div that's just a wrapper. I'm trying to combine the css from the outter div to the inner div so i can remove the outter div. When I do that, the div is no longer visible(assuming because of zero height). I thought maybe it was the order so I tried rearranging the css but still no luck.

#div1 {
    min-height: 200px;
    width: 100vw;
}

#div2 {
    /* min-height: 200px;
    width: 100vw; */
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #74CFAE;
    font-size: 25px;
    line-height: 40px;
    z-index: -1;
}

#div3 {
    position: relative;
    height: 600px;
    width: 100vw;
    background-color: #333;
}
<div id="div1">
    <div id="div2">
        <p> I want the following div to scroll over this content.</p>
    </div>
</div>

<div id="div3"></div>

If you comment out the css for 'div1' and combine it with 'div2' you will see what I am talking about.

Is this a case that requires a wrapper? or is there something inherently wrong with my css?

Upvotes: 1

Views: 21151

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17144

My take on it: if you know height of div2, you can drop div1, but you'll have to place div3 at a definite top. If you don't know div1/2 height and don't want to reposition dynamically div3, it seems like div1 as a wrapper is a good solution. A suggestion with known div2 height:

#div2 {
    height: 100px
    width: 100vw;
    position: fixed;

    background-color: #74CFAE;
    font-size: 25px;
    line-height: 40px;
    z-index: -1;
}

#div3 {
    position: relative;
    height: 600px;
    width: 100vw;
    background-color: #333;
    top: 100px;
}

https://jsfiddle.net/oahurc53/1/

Upvotes: 1

Related Questions