Question

我有一个固定的顶部div，高度可变。我需要的是推动固定div下方的底部内容重新定位自己，因为固定div的高度在各个页面中发生变化。

P.S。我目前正在使用jquery进行此操作，但它需要一些渲染时间并显示损坏的内容，直到页面完全加载，因为它在body标记的末尾添加。我想在最后加载jquery和其他脚本，所以试图找到一种方法来完全使用CSS，如果可能的话去除那些渲染效果。

以下是需要仅使用CSS的演示代码 -

＆＃13;

    <div class="container">
    <div class="top">
    This is a fixed div with variable height and the bottom content are supposed to pushed and stayed below as the height increases.
    </div>
    <div class="bottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur porttitor neque at vestibulum. Nulla facilisi. Nullam tempus ligula sapien, dictum scelerisque libero tristique et. Ut sit amet magna eros. Suspendisse potenti. Donec vitae sodales nunc. Nunc eget condimentum urna. Nulla sit amet lectus ac nunc mattis porttitor eget quis purus. Ut rhoncus nulla eget velit tincidunt luctus. Donec in justo tempus, porttitor magna nec, semper eros. In bibendum magna eget lectus viverra ultricies. Integer pharetra augue lorem, eu tempus nulla volutpat dignissim.

    Morbi vulputate arcu sit amet lectus porttitor hendrerit. Donec id pharetra urna, sit amet tincidunt nulla. Nam semper felis vitae odio elementum posuere. Vivamus blandit accumsan sapien, vitae blandit est lacinia et. Nam sit amet diam massa. Quisque et erat et orci dignissim congue. Maecenas pellentesque pretium sodales. Donec pellentesque rhoncus tortor et hendrerit. Phasellus nec dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce nec ligula mollis, iaculis est a, lobortis est. Phasellus faucibus varius arcu, eget volutpat quam venenatis vel. Sed felis nulla, pulvinar ut metus ac, luctus finibus tortor. Aliquam vulputate, nulla quis accumsan pretium, lacus elit sollicitudin ipsum, non faucibus erat mauris a felis.
    </div>
    </div>

＆＃13;

{{1}}

＆＃13;

Answer 1

试试这个

.bottom {
  height: auto;
  width: 100%;
  margin-top: 1cm;
}

Answer 2

我更新了小提琴及其工作：https://jsfiddle.net/m0615z32/1/

以下是适用于您的纯JavaScript代码。请检查我所做的是在不使用jquery的情况下将下面容器的填充顶部设置为等于顶部容器的高度。

document.getElementById("bottom-div").style.paddingTop = document.getElementById("top-div").clientHeight+"px";

OR

如果您可以将顶部容器更改为相对而非固定，那么这也可以，但不会将div固定在顶部

.top {
  position: relative;
  height: auto;
  width: 100%;
  background-color: black;
  color: white;
  top: 0;
}

现在，最重要的内容将始终位于顶部。它将根据内容进行调整，下面的容器将在顶端后开始。

将固定div放在另一个具有可变高度的固定div下面，而不使用jquery

2 个答案: