相对于具有可变内容的固定DIV定位DIV

时间：2015-08-06 08:28:20

标签： html css css-position

我有2个DIV。第一个（蓝色背景）有一个固定的位置。第二个（黄色背景）应位于第一个下方。第一个DIV的内容是可变的，因此具有可变的高度。但我希望第二个DIV相对于第一个DIV的高度向上或向下移动。

现在第二个DIV的行为是不行的。它隐藏了＃39;在第一个DIV背后，但我希望第二个DIV开始，第一个DIV结束，无论第一个DIV的高度是什么。

我可以轻松地将一些css添加到第二个DIV（填充顶部：100px或其他东西），但我不能使用设定高度，因为第一个DIV的高度是可变的（尝试更改宽度）浏览器窗口，看看我的意思）

如何让第二个DIV相对于第一个DIV的高度改变它的垂直位置？

＆＃13;
＆＃13; 
<div style="background-color:#00f; color:#fff; position:fixed; height:auto; width:94%; ">
		1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111
	</div>
	<div style="background-color:#ff3; color:#000; padding:10px; display:inline-block; width:90%; height:auto;">
		2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
	</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

position:sticky更广泛，您可以使用它。

body {
  margin-top: 8px
}
<div style="background-color:#00f; color:#fff; position:sticky; top:8px; height:auto; width:94%; ">
  start of first
  1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111
  1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111
  end of first
</div>
<div style="background-color:#ff3; color:#000; padding:10px; display:inline-block; width:90%; height:auto;">
  start of second
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  end of second
</div>

但是由于这只在Firefox中有效（目前），你现在可以做的是使用fixed和一些JavaScript将第二个div的上边距设置为第一个div的高度。

document.getElementById('second').style.marginTop =
  document.getElementById('first').offsetHeight + 'px';
body {
  margin-top: 8px
}
<div id="first" style="background-color:#00f; color:#fff; position:fixed; top:8px; height:auto; width:94%; ">
  start of first
  1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111
  1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111
  end of first
</div>
<div id="second" style="background-color:#ff3; color:#000; padding:10px; display:inline-block; width:90%; height:auto;">
  start of second
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  end of second
</div>

答案 1 :(得分：0)

漂浮可以解决问题吗？所以两个div都使用float：left。并添加一个明确的：两个到第二个div。看到： https://jsfiddle.net/rzL7u8xe/

＆＃13;
＆＃13; 
<div style="background-color:#00f; color:#fff; height:auto; width:94%; float:left">
	1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111
</div>
<div style="background-color:#ff3; color:#000; padding:10px; display:inline-block; width:90%; height:auto; float:left; clear:both;">
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

＆＃13;
＆＃13; 
<!doctype html>
<html>
<head>
  <title>fixed position</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js"></script>
  <script>
    $(window).load(function(){
      $("#header").sticky({ topSpacing: 0 });
    });
  </script>
  <script type="text/javascript">
  //refresh page on browser resize
$(window).bind('resize', function(e)
{
  if (window.RT) clearTimeout(window.RT);
  window.RT = setTimeout(function()
  {
    this.location.reload(false); /* false to get page from cache */
  }, 200);
});
  </script>
  <style>
    body {
      height: 10000px;
      padding: 0;
      margin: 0;
    }

    #header {
      background: #00f;
      color: white;
      font-size: 18px;
      line-height: 1.6em;
      font-weight: bold;
      text-align: center;
      padding: 2%;
      text-shadow: 0 1px 1px rgba(0,0,0,.2);
      width:100%;
      box-sizing:border-box;
    }
  </style>
</head>
<body>
  <div id="header">
    <div>1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 </div>
  </div>
  <div style="background-color:#ff3; color:#000; padding:2%; display:inline-block; width:95%; height:auto;">
    2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222 2222
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我也遇到过类似的问题，我的导航栏是固定的，相对的下一个div相对位置是从顶部开始的，而不是固定的<nav>高度之后。

为了让您考虑得更好，请让我在源头上向您展示。

<header>
    <nav class="position-fixed" style="height:100px;">
        ....logo with some menus and icons.
    </nav>
    <div class="position-relative" style="height:200px;">
        ...background banner and other stuffs
    </div>
</header>

所以下面说的事情正在发生...

  1. <header>的高度显示为200px，而不是300px
  2. 因为div放在<nav>之后是从最高的零开始。

因此，我在上述安排下执行此操作，以便从固定<nav>上方到顶部查看div。

.commonDiv {
  width: 100%;
  height: 100px;
  line-height: 100px;
  border: 1px solid black;
  text-align: center;
}

.first {
  position: fixed;
  background: orange;
  width: calc(100% - 16.5px);
}

.dummyDiv {
  position: relative;
  overflow: hidden;
}

.second {
  position: relative;
  background: white;
}

.third {
  position: relative;
  background: green;
}
<div>
  <div class="commonDiv dummyDiv">
    <div class="first">
      I am first and I am fixed
    </div>
  </div>
  <div class="second commonDiv">
    I am second and I am relative to dummy
  </div>
  <div class="third commonDiv">
    I am third and I am relative to second
  </div>
</div>

在CSS中，您已经管理了<div class="first">元素的宽度，因为它的位置是fixed并且固定位置元素直接指向视口，或者您可以说{{1 }}页面，而不是像DOM这样的父标记或元素（因此，这是位置absolute和fixed之间的主要区别）。

因此，我将固定的absolute保留在名为div/nav的相对div类中，以管理下一个即将到来的相对"dummyDiv"的高度，

人们明智的方式可以有很多，而我已经像上面那样处理了这种情况，希望对大家有帮助。

相关问题
最新问题