web-dev-qa-db-fra.com

CSS 100% Height, puis Scroll DIV pas la page

D'accord, je n'ai pas encore trouvé de question avec réponse, alors j'ai décidé de poser la mienne. 

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

MAIS, ce que je veux faire maintenant, c'est que la page soit à 100% en HAUTEUR ... Mais je ne veux pas que la page défile, je veux que la division interne défile. 

Donc, je crois qu'en un mot, je veux qu'il détecte la hauteur de l'écran de la fenêtre d'affichage, passe à 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 

htmlcssscroll
49
Justin
<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 cas simple

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 permettra au navigateur et à la zone de contenu de défiler.

55
John Hartsock

C'est une manière différente de faire cela avec tous les panneaux abs, cela échouera sur IE6, mais je peux fournir la solution de contournement CSS pour IE6 si c'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>
9
David

faire overflow:auto pour la div

6
Mahesh Velaga

overflow: auto; sur le style DIVVous devez juste savoir que la taille de la div doit augmenter afin de pouvoir afficher des défilements dans ce dernier . "débordement: caché;" sur le corps) cela ne fonctionnera pas.

2
Gabriel Guimarães

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>

0
詹特维

Si vous ne souhaitez pas utiliser position: absolute (car cela gâche votre impression si vos marges doivent être différentes de toutes les zéros), vous pouvez le faire avec un peu de JavaScript.

Configurez votre corps et div comme pour permettre à la div de 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 du fait que la div ait une hauteur définie, et pour cela nous avons besoin de JavaScript.

Créez une fonction simple pour réinitialiser la hauteur de votre div à défilement

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

Ensuite, appelez cette fonction lors du chargement de la page et lors du redimensionnement.

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

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