Question

我添加了一个代码段，我试图定位页眉和页脚，使其位于.main div内。

我不知道为什么这不起作用。相反，它跨越整个视口。

在这个特定的布局中，我无法确定没有JavaScript的父级的左侧位置，我希望将其保留在CSS中。

页眉和页脚应保持与滚动时相同的位置。

＆＃13;

.main {
  position: absolute;
  left: 60px;
  right: 0px;
  top: 0px;
  height: 50000px;
  background-color: #09f;
}

.parent {
  position: relative:
  width: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f00;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f00;
}

＆＃13;

<div class="main">
  <div class="parent">
    <div class="header">
      <h3>header</h3>
    </div>
    <div class="footer">
      <h3>footer</h3>
    </div>
  </div>
</div>

＆＃13;

先谢谢你的帮助，杰米

Answer 1

正如我在评论中所写的那样，固定宽度计入视口，而不是父元素。但您可以将left: 60px（与内容相同的值）设置为固定元素。

.main {
  position: absolute;
  left: 60px;
  right: 0px;
  top: 0px;
  height: 50000px;
  background-color: #09f;
}

.parent {
  position: relative:
  width: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 60px;
  right: 0;
  background-color: #f00;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 60px;
  right: 0;
  background-color: #f00;
}

<div class="main">
  <div class="parent">
    <div class="header">
      <h3>header</h3>
    </div>
    <div class="footer">
      <h3>footer</h3>
    </div>
  </div>
</div>

固定元素相对于父级

1 个答案: