Question

我遇到固定位置div的问题，它与第二个元素重叠。

如何让fill元素填充剩余空格而不会被fixed重叠？

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: flex-start;
}

.container .fixed {
  position: fixed;
  width: 100%;
  height: 200px;
  background: aquamarine;
  z-index: 2;
}

.container .fill {
  width: 100%;
  height: 2500px;
  background: orange;
  flex: 1;
}

<div class="container">
  <div class="fixed">
    Fixed content
  </div>
  <div class="fill">
    Remaining space
  </div>
</div>

这是有效的codepen demo

Answer 1

使代码示例工作主要有3件事要做：

当使用百分比作为高度（在container上）时，它的后代也需要一个高度

可选地，不是在height: 100%上添加html/body，而是可以使用视口单元，在这种情况下为vh，并在{{1}上更改height: 100% } {} {} {/ em>

使用正确的container值，假设它们应垂直堆叠，应为height: 100vh

为flex-direction项添加上边距，等于column项的高度

Stack snippet

fill

fixed

根据评论/脚本示例更新

如果*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; /* added */ } .container { width: 100%; height: 100%; display: flex; flex-direction: column; /* added */ } .container .fixed { position: fixed; left: 0; /* added, some browsers want this too */ top: 0; /* added, some browsers want this too */ width: 100%; height: 200px; background: aquamarine; z-index: 2; } .container .fill { width: 100%; /*height: 2500px; temp. removed */ background: orange; flex: 1; margin-top: 200px; /* added */ }上有动态高度，可以使用简单的脚本，这里使用jQuery。

Updated codepen

Stack snippet

<div class="container"> <div class="fixed"> Fixed content </div> <div class="fill"> Remaining space </div> </div>

fixed

jQuery(document).ready(function(){ /* get/set margin on page load */ $(".fill").css('margin-top', $(".fixed").height() + 'px') var btn = $("button"); btn.on("click", function(event){ $(".fixed").append("<div class=\"appended\">Hello</div>"); /* get/set margin */ $(".fill").css('margin-top', $(".fixed").height() + 'px') }); });

使用flexbox定位固定div

1 个答案: