0

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;
}
4
  • I'll hook you up with my jsfiddle - just a sec...
    – jay_t55
    May 16, 2013 at 4:19
  • @SurrealDreams Here is the most recent that I have tried: jsfiddle.net/gNdpG
    – jay_t55
    May 16, 2013 at 4:24
  • I have just updated that fiddle, with: jsfiddle.net/gNdpG/1 - and I got it to work! But it has a little bug, it makes the browser's vertical scrollbar appear. Needs more adjustments I think.
    – jay_t55
    May 16, 2013 at 4:28
  • Ok, this is my final one: jsfiddle.net/gNdpG/9 - it is working exactly how I want it in JSFiddle.net.
    – jay_t55
    May 16, 2013 at 4:33

3 Answers 3

2

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.

2
  • Thanks so much for the detailed answer :-) I think I might end up using Javascript. If it's not too much of a bother, would you have a look at jsfiddle.net/gNdpG/11 and tell me what you think? It seems to be working as I like it
    – jay_t55
    May 16, 2013 at 4:48
  • 1
    @Joey -- have a look at my comments on your answer.
    – Norguard
    May 16, 2013 at 4:53
1

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

0

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;
}
1
  • 1
    This isn't going to help you too much for the next time you need this (or if your users have a different resolution than you do, or have less/more browser window stretched out). Margin and padding and all of the rest are still going to wreak havoc all over this, and you won't be able to move your #main down, because your child will pop out of the top of it, as well. And even if you got that problem fixed, your new problem would either be that the "hidden" child is now only as tall as the parent, or is creating scrollbars down the page, even when it's invisible.
    – Norguard
    May 16, 2013 at 4:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.