CSS 100% Hauteur, et ensuite Scroll DIV pas page

Question

CSS 100% Hauteur, et ensuite Scroll DIV pas page

Demandé el 28 de Avril, 2010: Quand la question a-t-elle été
40370 affichage: Nombre de visites la question a
1 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je n'ai pas encore trouvé de question avec une réponse, alors j'ai décidé de créer la mienne.

J'essaie de créer une mise en page 100% fluide, ce que j'ai fait techniquement. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php

MAIS, ce que je veux faire maintenant, c'est rendre la page 100% en HAUTEUR... Mais je ne veux pas que la page défile, je veux que le DIV intérieur défile.

Je crois donc qu'en résumé, je veux qu'il détecte la hauteur de l'écran du viewport, qu'il aille jusqu'à 100%, et que si le contenu est plus long que l'écran, il fasse défiler le DIV spécifique, PAS la page.

J'espère que cela a un sens.

Merci d'avance. Justin

Demandé el 28 de Avril, 2010 par Justin

Answer 1

1 Réponses

Answer 2

0voto

詹特维 Points 1

Vous pouvez essayer ceci :

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style rel="stylesheet" type="text/css">
    .modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;}
    .bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;}
    .btn{position:fixed;top:100px;left:100px;}
 </style>
 </head>
<body style='padding:0px;margin:0px;'>
    <div class='bg' style='position:static'></div>
    <div class='modal' style='display:none'></div>
    <button class='btn'>toggle </button>
</body>
<script>
    var str='',count=200;
    while(count--){
        str+=count+'<br>';
    }
    var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'),
    btn=document.querySelector('.btn'),body=document.querySelector('body');
    modal.innerHTML=str;
    btn.onclick=function(){
        if(bg.style.position=='fixed'){
            bg.style.position='static';
            window.scrollTo(0,bg.storeTop);
        }else{
            let top=bg.storeTop=body.scrollTop;
            bg.style.position='fixed';
            bg.style.top=(0-top)+'px';
        }
        modal.style.display=modal.style.display=='none'?'block':'none';
    }
</script>
</html>

Répondu el 27 de Février, 2017 par 詹特维 (1 Points )

CSS 100% Hauteur, et ensuite Scroll DIV pas page

Réponse

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS 100% Hauteur, et ensuite Scroll DIV pas page

Réponse

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: