CODEWITHSUNDEEP
htmlcsspositioningcss-position
Hailwood
Hailwood

Reputation: 92651

Position dynamic height div just off top of visible screen portion?

I have a div that I wish to slide down and fade in and slide down (much the same as the twitter bootstrap modal).

To do this I wish to position the div using position fixed just above the visible viewport.

The issue being, that I do not know what size the div is (vertically) so I cannot just use top: -(height of div)px.

So, how can I do this with a dynamic height div?

      /-------------\
      |             |
      | Dynamic Div |
      |             |
\-----\-------------/-------/
|                           |
|         VIEWPORT          |
|                           |
/---------------------------\

Upvotes: 3

Views: 2817

Answers (3)

user1937021
user1937021

Reputation: 10801

You can use transform to do this:

  <!doctype html>
    <html>
    <head>
    <style>
      .hidden {
        position: absolute;
        top:0;
        width:100%;
        left:0;
        right: 0;
        transform: translateY(-100%);
      }
      .hidden.show {
        transform: translateY(0%);
      }
    </style>
    </head>
    <body>
      <div class="main">
        <div class="hidden">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacus ligula, accumsan id imperdiet rhoncus, dapibus vitae arcu. Nulla non quam erat, luctus consequat nisi. Integer hendrerit lacus sagittis erat fermentum tincidunt. Cras vel dui neque. In sagittis commodo luctus. Mauris non metus dolor, ut suscipit dui. Aliquam mauris lacus, laoreet et consequat quis, bibendum id ipsum. Donec gravida, diam id imperdiet cursus, nunc nisl bibendum sapien, eget tempor neque elit in tortor.
        </div>
      </div>
    </body>
    </html>

Add and remove the class .show here to see it work: https://jsfiddle.net/tprfdL21/

Upvotes: 0

ultranaut
ultranaut

Reputation: 2140

I've only tried it in Chrome, but it seems to work as you want:

<!doctype html>
<html>
<head>
<style>
  .hidden {
    background: red;
    width: 200px;
    position: fixed;
    bottom: 99%;
  }
</style>
</head>
<body>
  <div class="main">
    <div class="hidden">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacus ligula, accumsan id imperdiet rhoncus, dapibus vitae arcu. Nulla non quam erat, luctus consequat nisi. Integer hendrerit lacus sagittis erat fermentum tincidunt. Cras vel dui neque. In sagittis commodo luctus. Mauris non metus dolor, ut suscipit dui. Aliquam mauris lacus, laoreet et consequat quis, bibendum id ipsum. Donec gravida, diam id imperdiet cursus, nunc nisl bibendum sapien, eget tempor neque elit in tortor.
    </div>
  </div>
</body>
</html>

Basically, as I understand it, bottom sets the distance between the bottom of an absolutely positioned element and its containing block. In this case you want that to be 100%. In my example above I set it to 99% so I could see that it was in fact just peeking into the top of the window.

Upvotes: 0

Yeti
Yeti

Reputation: 2855

The idea is to put the actual element you want to be slidable, let's call it the twitterbar, I know nothing about twitter but it sounds cool, into a wrapper div.

So, you put the twitterbar with the essential css: position: absolute;margin-top:-100%; in a wrapper div with the essential css: position: fixed;. Now you need to animate the margin-top property of the twitterbar from -100% gradually to 0%.

You can do the animation using CSS3 which is kinda cool, but not supported for all users in early 2013. Or you can do the animation using Javascript, and if you feel lazy: jQuery. This is another problem though, which I won't solve for you.

The HTML for an example (some useless styles in it, but I hope it demonstrates that it works), you can manually change the percentages of the margin-top to show that it works.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #dynamic
            {
                position: absolute;
                margin-top: -50%;
                border: 4px dashed red;
                width: 100px;
                height: auto;
            }
            #wrapper
            {
                position: fixed;
                border: 4px dashed blue;
                width: 100px;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="dynamic">Dynamic<br />height<br />content</div>
        </div>
    </body>
</html>

PS. I hope I understood the question properly.

Upvotes: 1

Related Questions