CSS 100% hauteur, puis défiler DIV pas page

Bon, alors 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 fluide à 100%, ce que j'ai techniquement fait. MAIS, ce que je veux faire maintenant, c'est de rendre la page 100% en HAUTEUR ... Mais je ne veux pas que la page défile Je veux faire défiler la DIV interne.CSS 100% hauteur, puis défiler DIV pas page

Donc, je crois en bref, je veux qu'il détecte la hauteur de l'écran viewport, aller à 100%, puis SI le contenu est plus long que l'écran, faites défiler la DIV spécifique, pas la page.

J'espère que cela a du sens.

Merci d'avance. Justin

Source

2010-04-28 Justin

probablement mieux demander à Doctype: http://doctype.com/ – teabot

<html> 
    <body style="overflow:hidden;"> 
    <div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0"> 
    </div> 
    </body> 
</html>

Cela devrait le faire pour un simple cas

Je crois que cela fonctionnera pour votre cas

<html> 
    <body style="overflow:hidden;"> 
     <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div> 
     <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div> 
     <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div> 
     <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div> 
    </body> 
</html>

cet exemple vous donnera un en-tête et un pied de page statiques et permettent au navigateur et à la zone de contenu de défiler.

Source

2010-04-28 17:00:54

John, votre deuxième exemple travaillé génial! Merci beaucoup, cela fait longtemps que je m'occupe de ça. Appréciez-le. – Justin

Pas de problème. Heureux d'aider –

Ne fonctionne pas pour moi dans IE8 pour une raison quelconque, peut-être le CSS JQuery –

make overflow:auto pour la div

Source

2010-04-28 16:56:56

dépassement: auto; sur le style DIV Vous devez juste savoir que la taille de la div devrait augmenter afin qu'elle puisse afficher des parchemins. Si vous augmentez la taille de la page (ce qui devrait être avec style = "débordement: caché;" sur le corps) cela ne fonctionnera pas.

Source

2010-04-28 17:06:22

S'il vous plaît modifier cette réponse pour le rendre un peu plus lisible. Ensuite, mettez-le au-dessus du livre intitulé «Conseils secrets sur la merde bizarre de vrais ninjas CSS» – Zlatko

Ceci est une autre façon de le faire avec tous les panneaux abs, il échouera sur IE6, mais je peux fournir le CSS de solution pour IE6 si cela est une exigence:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Fluid Layout</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
<style rel="stylesheet" type="text/css"> 
    body { background-color:black; margin:0px; padding:0px; } 
    .pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px} 
    .headerBox { position:absolute; width:100%; height:50px; background-color:#333; } 
    .contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; } 
    .footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }   
    .contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; } 
    .contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }  
    .contentBoxLeft, 
    .contentBoxRight { overflow:auto; overflow-x:hidden; } 
</style> 
</head> 
<body>&nbsp; 
    <div class="pageBox"> 
     <div class="headerBox">Header</div> 
     <div class="contentBox"> 
      <div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div> 
      <div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div> 
     </div> 
     <div class="footerBox">Footer</div> 
    </div> 
</body> 
</html>

Source

2010-04-28 17:21:13 David

David, bourgeon impressionnant, votre premier à utiliser réellement l'info que j'ai donné, je vous remercie de montrer la mise en œuvre. Merci, était très utile. – Justin

Si vous n'êtes pas voulez utiliser position: absolute (car cela gâche votre impression si vos marges doivent être différentes de tous les zéros) alors vous pouvez le faire avec un peu de JavaScript.

Configurez votre corps et div comme pour ainsi permettre à la div pour faire défiler:

<body style='overflow:hidden'> 
    <div id=scrollablediv style='overflow-y:auto;height:100%'> 
    Scrollable content goes here 
    </div> 
</body>

Cette technique dépend de la div ayant une hauteur fixe, et que nous JavaScript besoin.

Créer une fonction simple pour réinitialiser la hauteur de votre div scrollable

function calculateDivHeight(){ 
    $("#scrollablediv").height(window.innerHeight); 
}

Et puis appeler cette fonction à la fois la charge de la page et sur Redimensionner.

// Gets called when the page loads 
calculateDivHeight(); 

// Bind calculate height function to window resize 
$(window).resize(function() { 
    calculateDivHeight(); 
}

Source

2016-06-14 23:16:10 Vincent

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;'> 
 
\t <div class='bg' style='position:static'></div> 
 
\t <div class='modal' style='display:none'></div> 
 
\t <button class='btn'>toggle </button> 
 
</body> 
 
<script> 
 
\t var str='',count=200; 
 
\t while(count--){ 
 
\t \t str+=count+'<br>'; 
 
\t } 
 
\t var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'), 
 
\t btn=document.querySelector('.btn'),body=document.querySelector('body'); 
 
\t modal.innerHTML=str; 
 
\t btn.onclick=function(){ 
 
\t \t if(bg.style.position=='fixed'){ 
 
\t \t \t bg.style.position='static'; 
 
\t \t \t window.scrollTo(0,bg.storeTop); 
 
\t \t }else{ 
 
\t \t \t let top=bg.storeTop=body.scrollTop; 
 
\t \t \t bg.style.position='fixed'; 
 
\t \t \t bg.style.top=(0-top)+'px'; 
 
\t \t } 
 
\t \t modal.style.display=modal.style.display=='none'?'block':'none'; 
 
\t } 
 
</script> 
 
</html>

Source

2017-02-27 14:00:22

CSS 100% hauteur, puis défiler DIV pas page

Répondre

Questions connexes