为内部容器创建一个固定标题 [英] Create a fixed header for an internal container

问题描述

我想创建一个固定的标题栏
，但问题在于标题不像总是那样是一个完整宽度的导航栏。

它是中间容器的标题，我有边栏和容器。

所以侧栏应该有相同的
，但容器标题应该保持在顶部当我滚动容器。

就像在这个代码示例中一样：

$ $ b

粉红色标题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屋！