定位固定的Div用Flexbox

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

使您的代码示例起作用：

有三件事要做：

• 使用高度百分比（在container上）时，其上升也需要一个高度

  可选，而不是在html/body上添加height: 100%，而是可以使用视口单元，在这种情况下可以使用vh，然后将container上的height: 100%更改为height: 100vh

• 使用正确的flex-direction值，为此，假设应垂直堆叠它们，应为column

• 在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  */
}

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

---

根据注释/脚本示例更新

如果fixed上有动态高度，则可以使用简单的脚本，在此处使用jQuery。

更新的codepen

堆栈片段

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')
   }); 
});

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container .fixed {
  position: fixed;
  width: 100%;
  background: aquamarine;
  z-index: 2;
}
.container .fixed button {
  display: block;
  padding: 1em;
  border-radius: 5px;
  box-shadow: none;
  border: 0;
  background: #d7d7d7;
}
.container .fixed .appended {
  padding: 1em;
  background: #fff;
  border: 1px solid blue;
  margin-bottom: 1em;
}
.container .fill {
  width: 100%;
  background: orange;
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="fixed">
    Fixed content
    <button>Click to append some element</button>
  </div>
  <div class="fill">
    Remaining space
  </div>
</div>