logo标签列表

如何将动态高度的div定位到可见屏幕顶部以下？

htmlcsspositioningcss-position
3
我有一个div希望能够下滑并淡入，就像Twitter Bootstrap模态框一样。为了实现这个效果，我想使用position fixed将div定位在可见视口的正上方。问题是，我不知道div的尺寸（垂直方向），所以我不能简单地使用top: -(div高度)px。那么，如何处理动态高度的div呢？
      /-------------\
      |             |
      | Dynamic Div |
      |             |
\-----\-------------/-------/
|                           |
|         VIEWPORT          |
|                           |
/---------------------------\
jQuery可以吗？ - Scott Selby
我知道我可以使用jQuery来实现，比如 var div = $('#div'); div.css('top', -div.outerHeight()); 但我更喜欢只用CSS来解决问题！ - Hailwood
仅使用CSS相当困难，特别是如果div是动态的。 - Ilan Biala
CSS的calc函数可能有所帮助，但几乎无法在任何地方使用。如果您已经在使用JS，为什么不将您的div保留在左侧，并在动画之前将其移动到内容上方呢？ - Mooseman
有人能够解释一下 Bootstrap 模态框是如何实现的吗？我认为它们做了类似的事情。 - Hailwood
我发现Bootstrap模态框的位置远在视口顶部之上。 - Mooseman
3个回答
1

这个想法是将您想要滑动的实际元素，我们称之为twitterbar（推特栏），我对推特一无所知，但听起来很酷，放入包装器div中。

因此，您将twitterbar与必要的css：position: absolute;margin-top:-100%;放入具有必要css：position: fixed;的包装器div中。现在，您需要逐渐将twitterbar的margin-top属性从-100％动画到0％。

您可以使用CSS3进行动画处理，这很酷，但在2013年初并不支持所有用户。或者您可以使用Javascript进行动画处理，如果您感到懒惰：jQuery。这又是另一个问题，我不会为您解决。

以下是示例的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>

附言：我希望我正确理解了问题。

0
你可以使用 transform 来实现这个功能：
  <!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/
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％，以便我可以看到它实际上只是窥视窗口的顶部。
你打算怎样将它向下滑动呢？你如何知道何时滑动到足够的距离，以使Lorem ipsum成为始终固定在视口顶部的最上方文本？确实可以使用position: absolute;top: 0px;margin-top:-100%;，你不需要position: fixed包装器，但是该包装器仅用于您可以将该div放置在页面任何位置（也许除了一些z-index属性）。除了我的回答，由于你没有使用position: fixed;， - Yeti
我本来不打算滑动它，那是@Hailwood的任务。他问如何将非固定大小的div底部定位在包含div的顶部。之后该怎么处理“是另一个问题，我不会为你解决”。 - ultranaut
你真的读了这个问题吗？（我本来想在这里引用，但似乎你在逗我，请阅读第一行和第三行，请注意，问题非常清楚） - Yeti
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接