我有三个div：容器，父级和标题。固定位置的标题应取容器的宽度，如果容器具有固定的宽度，它可以正常工作但如果我使用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。
答案 0 :(得分：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>