修正了左边的边栏菜单和顶部的固定头 [英] Fixed sidebar menu on the left and fixed header on top
问题描述
因此，我想要做的是一个固定的侧边栏，顶部有固定菜单，内容可以在中间滚动。
- <= c $ c> ，
< 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> < / div>< / div>
小提琴： http://jsfiddle.net/kbb7t7vd/1/
我的主要问题是标题与内容部分相比并不居中。
我认为这是因为宽度为100％使它更大，然后它应该。
我可以解决这个问题，而不使用JS来计算宽度？
也许我只是以错误的方式进行布局，并且你们可能会帮助我更好地理解这一点以及它的工作方式。
预先感谢。
这个问题确实与宽度有关：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>
这篇关于修正了左边的边栏菜单和顶部的固定头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
