为什么我的 div 不占用其 parent div 的宽度？

Question

我有一个 header div，我想采用与其 parent div 相同的宽度，内容居中。截至目前，div 已缩小到其内容的宽度，将其置于 off-center.

什么没用:

根据 this thread，从 parent div 继承宽度应该是默认行为或者可以用 width: auto 加强，但这似乎不是在我的网站上生效。
设置 width: 100% 使 header 太宽。
更改为 position: relative 对我来说不是一个选择，因为那时 header 将不再是粘性的。
Hard-coding宽度为a 固定宽度不理想，因为我希望页面可以调整大小。
指定一个固定的 max-width 同样使得 header 缩小到内容宽度。
width: inherit 没有一个效果，要么。

问题:
为什么其他线程中提出的解决方案不适用于我的情况？
如何使 header 具有与 container 相同的宽度？

body {
  max-width: 1200px;
  margin: auto;
}

nav {
  height: 100%;
  width: 250px;
  position: fixed;
  overflow-x: hidden;
  margin-top: 100px;
}


#container {
  margin-left: 250px;
}

#header {
  position: fixed;
  top: 0;
  height: 100px;
  background: white;
  border: 1px solid lightgray;
}

<!DOCTYPE html>
<html id="top">

<head>
  <link rel="stylesheet" href="style.css">
  </script>
</head>

<body>

  <nav id="nav">
    <li><a href="#sec1">Section 1</a></li>
    <li><a href="#sec2">Section 2</a></li>
    <li><a href="#sec3">Section 3</a></li>
  </nav>

  <div id="container">

    <div id="header">
      <h1><a href="#top">Title</a></h1>
    </div>

    <div id="content">
      <section id="sec1">
      <h2><a href="#sec1">Section 1</a></h2>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></section<
    </div>

  </div>

</body>

</html>

Answer 1

有几种方法可以实现您想要的效果。我确实理解为什么您需要将其固定为我认为您正在努力实现的目标。这也是导致问题的原因。将位置设置为“固定”将从文档流中删除该元素。

因为您已经对 left-nav 宽度进行了硬编码，所以将以下内容添加到您已有的内容中即可。

    #header {
        right:0;
        left:250px;
    }

如果您想将固定元素与内容对齐，您需要考虑几件事。

body 的 max-width 为 1200px。这意味着，您在解决这个问题时必须考虑到这一点，这可能会变得棘手。
如果不使用其他参考，您永远无法准确知道自动边距。
对于小于 1200px 的屏幕，您需要添加媒体查询。任何低于 100% 的值在低于 1200px 的情况下都无法正常工作。此外，为了对齐右边缘，您需要向 #content 添加固定边距，并向右偏移 header 相同的量。如果您不关心右边缘，您可以向右偏移 header 任意程度。

    #content {
      /* ... other css you had */
      margin-right:15px;
    }
    #header {
         /* ... other css you had */
         text-align:center;
         left: 250px;
         right: 15px;
    }
    @media screen and (min-width:  1200px) {
        #content {
           margin-right:0;
        }
        #header {
          left: calc(((100% - 1200px ) /2) + 250px);
          right: calc((100% - 1200px) /2);
        }      
    }

所以所有这些都可以，但是 calc 会减慢渲染速度（一些），我的感觉是这将是您将来必须改变的东西。我建议寻找另一种方法来实现您的目标。但是，在您提供的限制范围内，上述方法将起作用。

Answer 2

如果您坚持为 #header 使用 position: fixed，则应更改以下内容：

#header {
  position: fixed;
  top: 0;
  left: 250px;
  right: 0;
  text-align: center;
  height: 100px;
  background: white;
  border: 1px solid lightgray;
}

这会在250px视口左边创建一个margin/distance（和内容一样，由left: 250px引起），使其宽度跨度到最右边（right: 0 ) 并将页眉文本居中对齐 (text-align: center;)。这样它的宽度是动态的，具体取决于视口。

Answer 3

Why does my div not take its parent div's width?

因为你的css不允许

Why does the solution proposed in the other thread not apply in my case?

因为你的 div 是 fixed 情况不同

How to I make header have the same width as container?

就让它成为默认值吧。

在 css 中有像 fixed, absolute, flex, grid ... 这样的属性放弃了他们的遗产，行为古怪，无法遵循标准。

关于你的页面

人们用手机上网，很多人只有手机 phone 可以上网
nav{ width: 250px; position: fixed} 或 #header{ position: fixed; top: 0} 使某些设备无法访问内容
将 body 移到一边可能会在某些浏览器中被误解 - 您不需要它，它很奇怪且不可预测。
如果你有 header 就不要让它变穷 div
如果您申请全宽 header a border 它将具有全宽，但文本不会...

作为一个片段 - 不同的方法，好的结果

*{ box-sizing: border-box}
nav{ position: fixed; top: 0; left: 0; bottom: 0; padding: 15vh 10px; width: 25vw; text-align: center}
nav a{ text-decoration: none; color: inherit; outline: none; display: block; margin: 5vh auto; font-size: 1.5em}
main{ margin: 0 0 0 25vw; padding: 2vw}
header{ font-size: 5em}
section{ margin: 10vh 0}
h1{ text-align: center}

<nav>
<a href="#top">top</a>
<a href="#sec1">Section 1</a>
<a href="#sec2">Section 2</a>
<a href="#sec3">Section 3</a>
</nav>
<main>
<header id="top">Title</header>
<hr>
<section id="sec1"><h1>Section 1</h1>
<p>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.<br>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</p></section>
<section id="sec2"><h1>Section 2</h1>
<p>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.<br>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</p></section>
<section id="sec3"><h1>Section 3</h1>
<p>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.<br>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</p></section>

为什么我的 div 不占用其 parent div 的宽度？

Why does my div not take its parent div's width?

css

css-position