为内部容器创建一个固定标题 [英] Create a fixed header for an internal container
问题描述
我想创建一个固定的标题栏
,但问题在于标题不像总是那样是一个完整宽度的导航栏。
它是中间容器的标题,我有边栏和容器。
所以侧栏应该有相同的
,但容器标题应该保持在顶部当我滚动容器。
就像在这个代码示例中一样:
粉红色标题HEADER HERE应始终保持在顶部。
例如:
< div id =wrapper>
< div class =side>
方内容
< / div>
< div class =content>
< div class =header>
HEADER HERE
< / div>
< div class =inner>
dontcare long content
< / div>
< / div>
< / div>
我已经为您解决了这个问题: https://plnkr.co/edit/CO910df64twLhEvuaWvb?p=preview ;
解释
您将头部固定在位置(固定为屏幕)。所以你的内容的一部分将在标题下。所以在这里,我在内容上放置了一个填充顶部(可以用边距替换它)。
.content {
背景:蓝色;
宽度:70%;
float:left;
职位:亲属;
padding-top:2rem;
}
.content .header {
position:fixed;
top:0;
宽度:100%;
背景:粉色;
height:2rem;
}
I would like to create a fixed header bar, but the problem is that the header is not a full width navbar like always.
It is a header of the middle container, I have sidebar and container.
So the sidebar should be have the same, but the container header should stay at the top when I scroll the container.
just like in this code example:
https://plnkr.co/edit/RxSkde8M5wkNg5XoFNEF?p=preview
The pink header "HEADER HERE" should stay at the top always.
code from example:
<div id="wrapper">
<div class="side">
side content
</div>
<div class="content">
<div class="header">
HEADER HERE
</div>
<div class="inner">
dontcare long content
</div>
</div>
</div>
I had fixed it for you: https://plnkr.co/edit/CO910df64twLhEvuaWvb?p=preview;
Explanation
You set the header in position fixed (fixed to the screen). So a part of your content will be under the header. So here I put a padding-top on the content (you can replace it with a margin). The value of the padding-top has to be the same as the height of the header.
.content {
background: blue;
width: 70%;
float: left;
position: relative;
padding-top: 2rem;
}
.content .header {
position: fixed;
top: 0;
width: 100%;
background: pink;
height: 2rem;
}
这篇关于为内部容器创建一个固定标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!