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被推过屏幕右端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>

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

1 个答案: