html - 左侧固定侧边栏菜单和顶部固定标题

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

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>

这是一个 fiddle :http://jsfiddle.net/kbb7t7vd/1/

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

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

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

提前致谢。

最佳答案

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

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

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>

关于html - 左侧固定侧边栏菜单和顶部固定标题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27332271/