所以我想做的是一个固定的侧边栏，顶部有一个固定的菜单，中间的内容可以滚动。
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/ http://jsfiddle.net/kbb7t7vd/1/
我的主要问题是标题与内容部分相比不居中。
我相信会发生这种情况，因为它的宽度是 100%，这使得它比应有的要大。
我可以在不使用JS计算宽度的情况下解决这个问题吗？
也许我只是以错误的方式进行布局，你们可能会帮助我更好地理解这一点及其工作原理。
提前致谢。
这个问题确实与width: 100%。文本在 100% 宽标题内水平居中。标题与屏幕一样宽，但也有一个margin-left: 120px被推到屏幕右端 120 像素之外。
当你使用position: fixed on the <header>你可以改变
header {
margin-left: 120px;
left: 0;
width: 100%;
}
into
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
