html - 使用 calc() 容器将宽度设置为固定的 div

Question

我有三个 div:容器、父级和标题。固定位置的 header 应采用容器的宽度，如果容器具有固定宽度，它可以完美工作，但如果我使用 calc() 则什么也不会发生。

我在这里创建了一个例子https://jsfiddle.net/d34k53w1/5/

body {
  background: #ecf4f7;
}
.container {
  background: #fff;
  width: calc(100% - 280px);
  margin: 15px auto;
}
.parent {
  width: inherit;
  border-bottom: 2px solid #f2f2f2;
}
.header {
  width: inherit;
  height: 30px;
  position: fixed;
  background: #69abe3;
}
.content {
  padding: 20px;
}

<div class="container">
  <div class="parent">
    <div class="header">
      Lorem Ipsum
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
  </div>
</div>

PS:我不会用javascript。

Answer 1

尝试重置 body 标签的默认边距:

body {
  margin: 0;
}

body {
  background: #ecf4f7;
  margin: 0;
}
.container {
  background: #fff;
  width: calc(100% - 280px);
  margin: 15px auto;
}
.parent {
  width: inherit;
  border-bottom: 2px solid #f2f2f2;
}
.header {
  width: inherit;
  height: 30px;
  position: fixed;
  background: #69abe3;
}
.content {
  padding: 20px;
}

<div class="container">
  <div class="parent">
    <div class="header">
      Lorem Ipsum
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nulla libero. Phasellus quis eleifend urna. Curabitur mollis arcu nec quam venenatis, non luctus nibh ultricies. Proin at nisi vel mauris convallis tempor. Nam porttitor condimentum hendrerit.
      Phasellus quis velit arcu. Sed in porttitor velit. Mauris ut ante et nibh pellentesque sodales eu sed libero. Sed magna magna, sollicitudin non mattis eu, convallis nec lorem. Aenean metus velit, consequat quis tortor quis, volutpat ullamcorper
      erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper rhoncus lacus id tempor.
    </p>
  </div>
</div>