Question

我曾在以前的网站上尝试过这种方法。我不确定为什么现在不行。

body {
  max-width: 100%;
}
#header_encapsulator {
  max-width: 1000px;
  margin: auto;
  background-color: orange;
}
header {
position: fixed;
max-width: 60em;
width: 100%;
}
.logo {
float: left;
font-family: 'Tangerine', cursive; 
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}

h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}

<div id="header_encapsulator">
  <header>
    <a class="logo" href="/">Logo_name</a>
    <nav>
      <a href="">Menu_1</a>
      <a href="">Menu_2</a>
    </nav>
  </header>
</div>
<h1>Heading</h1>

如果我未指定margin:auto，我不确定#header_encapsulator内的<header>为什么不在max-width的中心。该网站将在宽度大于1000像素的显示器上中断。它不会占用10000px的值，也不会占用％的值。

第二，header_encapsulator应该在显示屏的边缘显示橙色背景图像。没有显示。我知道空的div / sections不会显示其属性，但是我之前已经做过，完全一样。

编辑：我用相同的代码创建了一个更简单的html和css文件。您可以下载here并在本地对其进行测试。我没有获得100％的橙色背景。

Answer 1

您正在指定max-width: 100%。这是div将占用的最大宽度，为了达到该宽度，div元素将需要足够的内容来填充到100％。

使用width代替max-width。这将强制将任何div设置为指定的宽度，而不考虑内容。

Answer 2

像这样给#header_encapsulator赋予一个高度

#header_encapsulator {
  width: 1000px;
  background-color: orange;
  height: 100px; // or anything you want
}

如果需要保证金：自动标题，则应执行以下操作：

#header_encapsulator header {
  margin: auto;
//other css if you want
}

Answer 3

不知道是否有任何理由#header-encapsulator本身而不是内部标头是固定的（这导致封装器为“空”，因此没有高度），只是移动将position: fixed属性设置为#header-encapsulator并添加一个width: 100%应该可以解决问题

编辑：从#header_encapsulator中删除了10000px最大宽度属性，并从标题中删除了宽度：100％。

body {
  max-width: 100%;
}

#header_encapsulator {
  width: 100%;
  background-color: orange;
  /*Put it in here*/
  position: fixed;
}

header {
  /*Removed it from here*/
  max-width: 60em;
  margin:auto
}

.logo {
  float: left;
  font-family: 'Tangerine', cursive;
  font-size: 3rem;
  padding: 0 0 0 1rem;
  text-decoration: none;
  font-weight: bold;
  color: black;
}

nav {
  float: right;
  padding: 1.5rem 1rem 0 0;
}

nav a {
  text-decoration: none;
}

nav a:first-child {
  padding-right: .8rem;
}

h1 {
  font-size: 2rem;
  text-align: center;
  padding: 12rem 0 2rem 0;
  font-family: 'Roboto Slab', serif;
}

<div id="header_encapsulator">
  <header>
    <a class="logo" href="/">Logo_name</a>
    <nav>
      <a href="">Menu_1</a>
      <a href="">Menu_2</a>
    </nav>
  </header>
</div>
<h1>Heading</h1>

该部分未显示背景色

3 个答案: