CODEWITHSUNDEEP
htmlcssweb
Chunmuchy
Chunmuchy

Reputation: 19

Div under a full screen div with "fixed or absolute"?

I've been looking into mimicking some websites to learn some new neat techniques.

And while doing so, I came up with some trouble emulating a certain site.

http://dangblast.com/ heres the link to the site.

If you look at the top of the website there is a div that contains a background image that has an "absolute" position and a "background-size" that covers and my question starts here.

Right underneath that div, there is another div (id = "about") that follows up right after and surprisingly the div always comes right after even if the window size is changed.

From my understating, I thought that it was impossible to stack an "abosolute" or "fixed" positioned div right after another, they just become layered.

Is there a trick to achieving this type of effect?

right now I have a div in my website that looks like the following

The Html

<div id = "fill_screen">
</div>

<div id = "followup_div">
</div>

The CSS

#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
}

Is there a way to make divs fit right under a absolute or fixed positioned div that is also filling up the window of the screen? That is dynamic to the web-browser size?

I did some research and there were techniques using viewports height (vh), but I saw that some old browsers were not compatible with it.

Upvotes: 1

Views: 5227

Answers (2)

Somi
Somi

Reputation: 86

If you take a look at the top of id="intro" you can see class="intro-down". this anchor makes space for fixed div and if you remove it you can see that id "intro"(which is a fixed div) will be disappeared.

Upvotes: 0

Joe Scotto
Joe Scotto

Reputation: 10857

You have to modify the position of the followup_div. The followup_div uses absolute positioning and has to be moved 100% from the top.

HTML:

<div id = "fill_screen">
    <button>text</button>
</div>

<div id = "followup_div">

</div>

CSS:

body {
margin:0px;
}

#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
right:0;
bottom:0;
background-color:red;
}

#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
position:absolute;
top:100%;
}

DEMO

Upvotes: 3

Related Questions