固定div与100％宽度重叠滚动条 [英] fixed div with 100% width overlaps scrollbar

问题描述

正如这里演示的那样： http://codepen.io/anon/pen/rVPqeL

我使用3个简单的div，我想要获得必须通过头部全局滚动条的效果。

html非常基本

 < div class =container > 
< div class =header> 
< / div> 
< div class =content> 
< / div> 
< / div> 
  

以下是css：

  .container {
 position：absolute; 
 top：0; 
 bottom：0; 
剩下：0; 
 right：0; 
 background-color：gray; 
 overflow-y：scroll; 
} 
 
 .header {
 position：fixed; 
宽度：100％; 
 height：50px; 
背景颜色：红色; 
} 
 
 .content {
 margin-top：50px; 
 min-height：2500px; 
 background-color：blue; 
} 
  

滚动条不断在标题div下。我在做什么错了？

解决方案

  .container {
 margin-top ：50像素; / *为标题创建空间* / 
 position：absolute; 
 top：0; 
 bottom：0; 
剩下：0; 
 right：0; 
 background-color：gray; 
 overflow-y：scroll; 
} 
 
 .header {
 margin-top：-50px; / *向上移动50px * / 
 position：fixed; 
宽度：100％; 
 height：50px; 
背景颜色：红色; 
} 
  

固定定位元素具有无宽度和高度。

希望它有帮助：）

编辑：看这支笔：这个

Ps。我想你也想删除 .content

As demonstrated here: http://codepen.io/anon/pen/rVPqeL

I am using 3 simple divs and I want to obtain an effect of a "global" scrollbar that has to go over the header.

The html is very basic

<div class="container">
    <div class="header">
    </div>
    <div class="content">
    </div>
</div>

and here's the css:

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
  overflow-y: scroll;
}

.header {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}

.content {
  margin-top: 50px;
  min-height: 2500px;
  background-color: blue;
}

The scrollbar keeps going under the header div. What am I doing wrong?

解决方案

.container {
  margin-top:50px; /* create room for header*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
  overflow-y: scroll;
}

.header {
  margin-top:-50px; /* move up by 50px*/
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}

fixed positioned elements have "no width and height".

Hope it helps :)

EDIT: See this pen: This

Ps. I guess you also want to remove the margin of .content

这篇关于固定div与100％宽度重叠滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！