57 votes

Justin avatar

CSS 100% Hauteur, et ensuite Scroll DIV pas page

Demandé el 28 de Avril, 2010
Quand la question a-t-elle été
40369 affichage
Nombre de visites la question a
5 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

Réponses

Trop de publicités?

67voto

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

Cela devrait suffire pour un cas simple

Je pense 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.

Répondu el 28 de Avril, 2010 par John Hartsock (36565 Points )

0 votes

Avatar de Justin

John, votre deuxième exemple a fonctionné à merveille ! Merci beaucoup, cela fait bien trop longtemps que je m'embête avec ça. Je vous en remercie.

Commenté el 28 de Avril, 2010 par Justin

0 votes

Avatar de Eran Medan

Cela ne fonctionne pas pour moi dans IE8 pour une raison quelconque, peut-être le CSS JQuery.

Commenté el 9 de Avril, 2011 par Eran Medan

1 votes

Avatar de Saber Amani

Super, tu as sauvé ma journée

Commenté el 27 de Mars, 2014 par Saber Amani

9voto

David avatar
David Points 2413

Il s'agit d'une manière différente de procéder avec tous les panneaux abs. Elle échouera sous IE6, mais je peux fournir le CSS de contournement 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>
Répondu el 28 de Avril, 2010 par David (2413 Points )

1 votes

Avatar de Justin

David, tu es le premier à utiliser les informations que je t'ai données, j'apprécie que tu montres l'implémentation. Merci, c'était très utile.

Commenté el 28 de Avril, 2010 par Justin

6voto

Mahesh Velaga avatar
Mahesh Velaga Points 9420

Faire overflow:auto pour le div

Répondu el 28 de Avril, 2010 par Mahesh Velaga (9420 Points )

2voto

Gabriel Guimarães avatar
Gabriel Guimarães Points 1851

Overflow:auto ; sur le style du DIV Il faut savoir que la taille du div doit augmenter pour pouvoir afficher les défilements à l'intérieur. Si vous augmentez la taille de la page (ce qui devrait être fait avec style="overflow : hidden ;" sur le corps) cela ne fonctionnera pas.

Répondu el 28 de Avril, 2010 par Gabriel Guimarães (1851 Points )

1voto

Vincent avatar
Vincent Points 111

Si vous ne voulez pas utiliser position:absolute (parce que cela perturbe l'impression si vos marges doivent être différentes de zéro), vous pouvez le faire avec un peu de JavaScript.

Configurez votre corps et votre div comme suit 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 exige que la division 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 scrollable.

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

Et appelez ensuite cette fonction à la fois au chargement de la page et au redimensionnement.

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

// Bind calculate height function to window resize
$(window).resize(function () {
  calculateDivHeight();
}
Répondu el 15 de Juin, 2016 par Vincent (111 Points )

0 votes

Avatar de brandonhill

C'est la seule solution qui permette d'aborder le problème principal, à savoir le fait d'avoir height: 100% . Cependant, il n'est pas nécessaire d'utiliser JS, mais seulement la hauteur définie sur tous les ancêtres droit à html . Réglage overflow n'est nécessaire que pour le conteneur de défilement, et non pour ses ancêtres.

Commenté el 30 de Juin, 2021 par brandonhill

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X