修正了左边的边栏菜单和顶部的固定头

本文介绍了修正了左边的边栏菜单和顶部的固定头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

- ，

这个问题确实与宽度有关：100％。文本在100％宽的标题内水平居中。标题和屏幕一样宽，但是它也有一个 margin-left：120px 被推到屏幕右端120px。

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

 标题{
 margin-left：120px; 
剩下：0; 
宽度：100％; 
}

转换为

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

这将使文本水平居中。

body，html {height：100％; margin：0;} aside {background：＃90EE90;身高：100％;左：0;位置：固定; top：0; width：120px;} ul {list-style：none;} section {background：＃ADD8E6;身高：100％; margin-top：60px;} header {background：＃FF0;身高：60px; left：120px;正确：0;位置：固定; text-align：center; top：0; z-index：99;}。container {left：0; margin-left：120px;最小高度：100％;位置：相对; text-align：center;} figure {margin：0;} img {height：60px; width：100％;} < aside> < NAV> < div class =nav-header> <图> < img src =http://placehold.it/140x100alt =/> < /数字> < / DIV> < UL> < li>第1项< / li> < li>第2项< / li> < li>第3项< / li> < li>第4项< / li> < li>第5项< / li> < li>第6项< / li> < / UL> < / nav>< / aside>< header> Header Centered< / header>< div class =container> <节> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < DIV>滚动< / DIV> < / section>< / div>

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.

解决方案

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>

这篇关于修正了左边的边栏菜单和顶部的固定头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！