fixe div avec 100% de la largeur de chevauchements barre de défilement

Comme démontré ici: http://codepen.io/anon/pen/rVPqeL

Je suis à l'aide de 3 divs et je veux obtenir un effet de "global" de la barre de défilement qui a pour aller sur l'en-tête.

Le html est très basique

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

et voici le 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;
}

La barre de défilement continue à aller de l' sous l'en-tête div. Ce que je fais mal?

OriginalL'auteur sh0uzama | 2015-08-06

css html

1

Si je comprends bien, vous souhaitez que la barre de défilement toujours ontop. Pour ce faire modifier votre css à la suite de
```
html{
    overflow-y: scroll;
}
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
}
```
De défilement sur le code html permettra à l'ensemble de la page pour faire défiler tout en gardant en-tête statique et supprimer de défilement de la boite.

OriginalL'auteur Bytesized

.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;
}

fixe les éléments en position "n'avaient pas la largeur et la hauteur".

Espère que cela aide 🙂

EDIT: Voir ce stylo: Cette

Ps. Je suppose que vous aussi, vous voulez supprimer la marge de .content

Ce n'est effectivement pas ce que l'OP est de demander.

OriginalL'auteur SimsaD

Le code ci-dessous fait le tour
http://codepen.io/anon/pen/XbOxgp

.container {
  background-color: gray;
  overflow-y: scroll;
}

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

.content {
  z-index: 1;
  width: 100%;
  position: absolute;
  top: 60px;
  min-height: 2500px;
  background-color: blue;
}

OriginalL'auteur Jayan Karthik Pari

0

Supprimer overflow-y: scroll; de votre .container

Si cette réponse est correcte, je pense que ce n'est pas le cas, pourquoi serait-OP ont même ajouté overflow-y: scroll à son code? Je pense que l'OP veut faire défiler à l'intérieur du conteneur, et non dans l'ensemble de la page. Droit?

OriginalL'auteur Ryan89

mettre le overflow-y: scroll; à l'intérieur de la corps élément:

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

OriginalL'auteur Soul Eeater

html, body {
    height: 100%;
    width: 100%;
    overflow: visible;
}

OriginalL'auteur Peter Isaac

-1

Regarder ce post. Espérons que le principe il y a un peu utile

Les navigateurs de la barre de défilement est sous mon fixe div

OriginalL'auteur OpenEX

Vous devez vous connecter pour publier un commentaire.