Fixed sidebar menu on the left and fixed header on top

问题

So what I want to do is a fixed sidebar with a fixed menu on top and the content scrollable in the middle.

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>

Here is a fiddle: http://jsfiddle.net/kbb7t7vd/1/

My main problem is that the header is not centered compared to the content section.

I believe that happens because it width is 100% and that makes it bigger then it should.

Can I fix this without using JS to calculate the width? Maybe I'm just doing the layout in a wrong way and you guys might help me to understand this better and how it works.

Thanks in advance.

回答1:

The issue has indeed to do with the width: 100%. The text is horizontally centered within the 100% wide header. The header is as wide as the screen, but as it also has a margin-left: 120px gets pushed 120px past the right end of the screen.

As you use position: fixed on the <header> you can change

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

into

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

This will make the text horizontally centered.

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>

来源：https://stackoverflow.com/questions/27332271/fixed-sidebar-menu-on-the-left-and-fixed-header-on-top

标签

html

css

header

fixed

sidebar