左侧固定侧边栏菜单，顶部固定标题

Question

所以我想做的是一个固定的侧边栏，顶部有一个固定的菜单，中间的内容可滚动。

body,
html {
  height: 100%;
  margin: 0;
}
aside {
  background: #90EE90;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 120px;
}
ul {
  list-style: none;
}
section {
  background: #ADD8E6;
  height: 100%;
  margin-top: 60px;
}
header {
  background: #FF0;
  height: 60px;
  left: 0;
  margin-left: 120px;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 99;
}
.container {
  left: 0;
  margin-left: 120px;
  min-height: 100%;
  position: relative;
  text-align: center;
}
figure {
  margin: 0;
}
img {
  height: 60px;
  width: 100%;
}

<aside>
  <nav>
    <div class="nav-header">
      <figure>
        <img src="http://placehold.it/140x100" alt="" />
      </figure>
    </div>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
    </ul>
  </nav>
</aside>
<header>Header Centered</header>
<div class="container">
  <section>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
  </section>
</div>

这是一个小提琴：http://jsfiddle.net/kbb7t7vd/1/

我的主要问题是标题与内容部分相比没有居中。

我相信会发生这种情况，因为它的宽度是 100%，这使它变得比它应该的更大。

我可以在不使用 JS 计算宽度的情况下解决这个问题吗？ 也许我只是以错误的方式进行布局，你们可能会帮助我更好地理解这一点以及它是如何工作的。

提前致谢。

Answer 1

这个问题确实与width: 100% 有关。文本在 100% 宽的标题中水平居中。标题与屏幕一样宽，但它也有一个 margin-left: 120px 被推到屏幕右端 120 像素之外。

当您在<header> 上使用position: fixed 时，您可以更改

header {
   margin-left: 120px;
   left: 0;
   width: 100%;
}

进入

header {
    left: 120px;
    right: 0;
}

这将使文本水平居中。

body,
html {
  height: 100%;
  margin: 0;
}
aside {
  background: #90EE90;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 120px;
}
ul {
  list-style: none;
}
section {
  background: #ADD8E6;
  height: 100%;
  margin-top: 60px;
}
header {
  background: #FF0;
  height: 60px;
  left: 120px;
  right: 0;
  position: fixed;
  text-align: center;
  top: 0;
  z-index: 99;
}
.container {
  left: 0;
  margin-left: 120px;
  min-height: 100%;
  position: relative;
  text-align: center;
}
figure {
  margin: 0;
}
img {
  height: 60px;
  width: 100%;
}

<aside>
  <nav>
    <div class="nav-header">
      <figure>
        <img src="http://placehold.it/140x100" alt="" />
      </figure>
    </div>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
    </ul>
  </nav>
</aside>
<header>Header Centered</header>
<div class="container">
  <section>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
    <div>Scroll</div>
  </section>
</div>