position absolue + Défilement

de ce qui suit HTML et CSSposition absolue + Défilement

.container { 
 
    position: relative; 
 
    border: solid 1px red; 
 
    height: 256px; 
 
    width: 256px; 
 
    overflow: auto; 
 
} 
 
.full-height { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 128px; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="full-height"> 
 
    </div> 
 
</div>

Le div interne reprend la tête pleine du récipient comme on le souhaite. Si j'ajoute maintenant un autre, le flux, le contenu du récipient tel que:

.container { 
 
    position: relative; 
 
    border: solid 1px red; 
 
    height: 256px; 
 
    width: 256px; 
 
    overflow: auto; 
 
} 
 
.full-height { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 128px; 
 
    bottom: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="full-height"> 
 
</div> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus 
 
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate 
 
    placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem. 
 
</div>

Ensuite, les rouleaux de conteneurs comme on le souhaite, mais l'élément en position absolue n'est plus ancrée au fond de la conteneur mais s'arrête au fond initial du conteneur. Ma question est; est-il possible d'avoir l'élément en position absolue soit la hauteur de défilement complète de son conteneur sans utiliser JS?

Source

2013-07-15 Chris Meek

que je pourrais vous demander pourquoi vous avez top: 0; là aussi ? –

aucune raison particulière, j'ai l'habitude de plus de spécifier les choses –

Si vous supprimez 'top: 0;' il ne fonctionne tout simplement plus. – Brewal

Vous devez envelopper le texte dans un élément div et comprennent l'élément tout à fait disposé à l'intérieur de celui-ci.

<div class="container"> 
    <div class="inner"> 
     <div class="full-height"></div> 
     [Your text here] 
    </div> 
</div>

Css:

.inner: { position: relative; height: auto; } 
.full-height: { height: 100%; }

Réglage de la position de div intérieure à relative fait les éléments absolument de position à l'intérieur de celui-ci fondent leur position et la hauteur sur elle plutôt que sur la .container div, qui a une hauteur fixe . Sans l'intérieur, positionné relativement div, la div .full-height calcule toujours ses dimensions et la position basée sur .container.

http://jsfiddle.net/M5cTN/

Source

2013-07-15 14:59:06 giaour

Bien sûr, cela a aussi un sens (de la même manière que n'importe quel CSS;)) –

L'élément 'fill-height' défile clairement avec le contenu, l'OP ne voulait-il pas l'ancrer? (En changeant le fond bleu à une image de fond, vous pouvez voir ce que je veux dire quand je dis que ce n'est pas ancré http://jsfiddle.net/M5cTN/82/) – paulvs

merci beaucoup. trouvé votre solution, après des heures de recherche ... –

position: fixed; va résoudre votre problème. À titre d'exemple, revoir ma mise en œuvre d'un revêtement de zone de message fixe (peuplé programme):

#mess { 
    position: fixed; 
    background-color: black; 
    top: 20px; 
    right: 50px; 
    height: 10px; 
    width: 600px; 
    z-index: 1000; 
}

Et dans le code HTML

<body> 
    <div id="mess"></div> 
    <div id="data"> 
     Much content goes here. 
    </div> 
</body>

Lorsque #data devient plus tha sceen, #mess maintient sa position sur la écran, tandis que #data fait défiler dessous.

Source

2014-09-28 21:46:51 flaschbier

+24

Le positionnement fixe positionnera l'élément par rapport au navigateur, ce qui peut ne pas être le résultat souhaité. –

Si vous ne spécifiez pas haut, gauche, droite, l'élément fixe de position inférieure ne sera pas positionné par rapport à la fenêtre. Mais ceci a bien sûr une utilisation limitée, mais par défaut la position supérieure gauche, sinon elle sera positionnée par rapport à la fenêtre, elle a aussi un autre inconvénient, largeur: 100% ou hauteur: 100% sera identique aux dimensions de la fenêtre –

Alors gaiour est bon, mais si vous êtes à la recherche d'un élément de pleine hauteur qui ne défile pas avec le contenu, mais est en fait la hauteur du conteneur, voici le correctif. Avoir un parent avec une hauteur qui provoque le débordement, un conteneur de contenu qui a une hauteur de 100% et overflow: scroll, et un frère peut alors être positionné en fonction de la taille des parents, pas la taille de l'élément de défilement. Voici le violon: http://jsfiddle.net/M5cTN/196/

et le code correspondant:

html:

<div class="container"> 
    <div class="inner"> 
    Lorem ipsum ... 
    </div> 
    <div class="full-height"></div> 
</div>

css:

.container{ 
    height: 256px; 
    position: relative; 
} 
.inner{ 
    height: 100%; 
    overflow: scroll; 
} 
.full-height{ 
    position: absolute; 
    left: 0; 
    width: 20%; 
    top: 0; 
    height: 100%; 
}

Source

2015-03-20 20:47:42 TorranceScott

position absolue + Défilement

Répondre

Questions connexes