CODEWITHSUNDEEP
htmlcss
jay_t55
jay_t55

Reputation: 11662

Popping out of containing element and extending to rest of screen

I have a div, well, 2 div's and when I hover over the "main" div, I want the hidden div to appear (located inside the main div) and then pop its bottom out to stretch to fill the remainder of the bottom half of the screen.

An example would be:

enter image description here

I'm not asking for anyone to write code for me. I would very much appreciate any links/resources you might have that could point me in the right direction. I've been at this for hours, and I don't want to have a completely broken-up layout just to achieve this effect, but I'm just not able to get it.

I have tried this and many variations of it with no success:

HTML:

<div id="main">
    <div id="hiddendiv">

    </div>
</div>

CSS:

#main{
    width: 150px; height: 75px;
    background-color: #0061cc;
}

#hiddendiv{
    visibility: hidden;
    width: 75px; height: 100%;
    background-color: lightgray;
}

#main:hover > #hiddendiv {
    position: relative;
    height: 100%;
    visibility: visible;
}

Upvotes: 0

Views: 665

Answers (3)

user2361114
user2361114

Reputation: 162

I think you are looking for this....

HTML

<div id="main">
    <div id="hiddendiv">

    </div>
</div>

CSS

#main{
    width: 150px; height: 75px;
    background-color: #0061cc;
}

#hiddendiv{
    visibility: hidden;
    width: 150px; height: 100%;
    opacity: .7;
    background-color: lightgray;
}

#main:hover > #hiddendiv {
    position: absolute;
    height: 98.5%;
    visibility: visible;
    left:260px;
}

#main:hover
{
    width:400px;
}

DEMO

I hope this may help you.....

Upvotes: 1

LetterEh
LetterEh

Reputation: 26706

Well, I've got some good news and some dumb news.

The dumb news is that for all intent and purpose, it's approximately 137% impossible to use nothing but CSS to specify that an object take up "the rest of the height", without using some sort of hard-coding, even if that hard-coding is in percentages.

Even using what was supposed to be the magic bullet ( calc() ) in CSS wouldn't be guaranteed to work, because you can't necessarily do a calc which says "based on the current scroll-position, and the relative position of the top-edge of my parent, and the remaining pixels to the bottom of the screen, set my height to THAT".

Any CSS-only solution that I gave you would fall short by:

  1. only stretching to 100% of the parent's height
  2. stretching to 100% of the page's height (including going up)
  3. would require a guarantee that your parent isn't going to move up or down, at all (no scrolling), or that when the pop-out comes, the user won't be able to scroll until the pop-out goes away (or would look at home if the pop-out stayed stuck on-screen, in the same spot while a user scrolled up or down)

There's the bad news.

The good news is that this isn't a particularly difficult fix in JavaScript.

You'd want to use getBoundingClientRect on the pop-out, and use the .top property of the returned object, to figure out what your top edge is.
Then you could use your document.body.scrollTop and window.screen.height to figure out where you are, in relation.

ie: childEl.getBoundingClientRect().top - document.body.scrollTop should equal where you are onscreen. Subtract that from window.screen.height and now you know how tall you need to be to hit the current bottom-edge (which could still be scrolled past).

This is not a bulletproof, cross-browser solution.
But it's a starting point.

Also, I'd suggest that you use display:none, rather than visibility:hidden. The difference is that if you set the child to be width:200% it's going to give you a big, ugly scrollbar off the side of the page, even though it's invisible. visibility:hidden still pushes stuff, even if it's just pushing the edge of the page off to the side.

display:none hides the stuff, but also stops pushing everything.

Sort of like the difference between The Invisible Man and a ghost, trying to squeeze onto a packed subway car.

Upvotes: 2

jay_t55
jay_t55

Reputation: 11662

After a few more attempts using JSFiddle, I am finally satisfied with the result.

HTML:

<div id="main">
    <div id="hiddendiv">

    </div>
</div>

CSS:

#main{
    width: 150px; height: 75px;
    background-color: #0061cc;
}

#hiddendiv{
    visibility: hidden;
    width: 75px; height: 100%;
    opacity: .7;
    background-color: lightgray;
}

#main:hover > #hiddendiv {
    position: absolute;
    height: 98.5%;
    visibility: visible;
}

Upvotes: 0

Related Questions