将动态高度 div 定位在可见屏幕部分的顶部？答案

【问题标题】：Position dynamic height div just off top of visible screen portion?将动态高度 div 定位在可见屏幕部分的顶部？
【发布时间】：2012-12-27 21:51:27
【问题描述】：

我有一个 div，我希望向下滑动并淡入和向下滑动（与 twitter 引导模式非常相似）。

为此，我希望使用固定在可见视口上方的位置来定位 div。

问题是，我不知道 div 的大小（垂直），所以我不能只使用 top: -(height of div)px。

那么，如何使用动态高度 div 做到这一点？

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

【问题讨论】：

jquery 好吗？................（让我再添加 8 个字符）
我知道我可以使用 jquery 来做到这一点，也就是 var div = $('#div'); div.css('top', -div.outerHeight());，但我更喜欢纯 CSS 解决方案！
只有 CSS 是相当困难的，特别是如果 div 是动态的。
CSS calc 在这里可能会有所帮助，但几乎在任何地方都无法使用。如果您已经在使用 JS，为什么不将您的 div 放在左侧，并在动画之前将其移动到您的内容上方？
是否有人能够分解引导模式是如何做到的，因为我相信他们会做类似的事情？

标签： html css positioning css-position

【解决方案1】：

您可以使用转换来做到这一点：

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

在此处添加和删除类 .show 以查看它的工作原理： https://jsfiddle.net/tprfdL21/

【讨论】：

【解决方案2】：

我只在 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%，因此我可以看到它实际上只是在窥视窗口的顶部。

【讨论】：

你到底是怎么把它滑下来的？当您将其向下滑动到足以让 Lorem ipsum 成为粘在视口顶部的最顶部文本时，您怎么知道？您确实可以只使用 position: absolute;top: 0px;margin-top:-100%; 并且您不需要 position: fixed 包装器，但是只需要该包装器，因此您可以将 div 放在页面上的任何位置，这无关紧要（可能除了一些 z-index 属性）。除了我的回答，看到你没有使用position: fixed;
我根本不打算把它滑下来，那是@Hailwood 的演出。他询问如何将非固定大小的 div 的底部定位在包含 div 的顶部。之后如何处理它“不过是另一个问题，我不会为你解决”。
你真的读过这个问题吗？（其实我是要引用这里的，但是你好像在骗我，请看第一行和第三行，这个问题很清楚）

【解决方案3】：

这个想法是把你想要滑动的实际元素，让我们称之为 twitterbar，我对 twitter 一无所知，但它听起来很酷，放入一个包装器 div。

因此，您将带有基本 css：position: absolute;margin-top:-100%; 的 twitterbar 放在带有基本 css：position: fixed; 的包装 div 中。现在您需要将 twitterbar 的 margin-top 属性从 -100% 逐渐变为 0%。

您可以使用 CSS3 制作动画，这有点酷，但在 2013 年初并非所有用户都支持。或者您可以使用 Javascript 制作动画，如果您觉得懒惰：jQuery。不过这是另一个问题，我不会为你解决。

HTML 示例（其中一些无用的样式，但我希望它证明它有效），您可以手动更改页边距的百分比以显示它有效。

<!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。我希望我正确理解了这个问题。

【讨论】：