3

スライドダウンしてフェードインしてスライドダウンしたいdivがあります（Twitterのブートストラップモーダルとほぼ同じです）。

これを行うには、表示されているビューポートのすぐ上に固定された位置を使用して div を配置します。

問題は、divのサイズが（垂直方向に）わからないため、単に使用できないことtop: -(height of div)pxです。

では、動的な高さの div を使用してこれを行うにはどうすればよいですか?

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

3 に答える 3

0

Chromeで試しただけですが、思いどおりに機能するようです。

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

基本的に、私が理解しているようにbottom、絶対的に配置された要素の下部とその包含ブロックの間の距離を設定します。この場合、100％にする必要があります。上記の例では、99％に設定したので、実際にはウィンドウの上部を覗いているだけであることがわかりました。

于 2013-01-14T01:08:39.220 に答える
0

アイデアは、スライド可能にしたい実際の要素を配置することです。これを twitterbar と呼びましょう。私は twitter について何も知りませんが、クールに聞こえます。ラッパー div に入れます。

したがって、必須の css: を含む twitterbar を、必須の css:position: absolute;margin-top:-100%;を含むラッパー div に配置しますposition: fixed;。次に、twitterbar の margin-top プロパティを -100% から徐々に 0% にアニメーション化する必要があります。

CSS3 を使用してアニメーションを作成することもできますが、これは 2013 年の初めにすべてのユーザーに対してサポートされているわけではありません。または、JavaScript を使用してアニメーションを作成することもできます。ただし、これは別の問題であり、私は解決しません。

例の HTML (役に立たないスタイルがいくつか含まれていますが、機能することを示してくれることを願っています)。margin-top のパーセンテージを手動で変更して、機能することを示すことができます。

<!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。質問を正しく理解できたと思います。

于 2013-01-14T00:55:19.617 に答える