Comment faire en sorte que le contenu occupe 100% de la hauteur et de la largeur

Je suis si proche, mais je n'arrive pas à faire fonctionner ça comme je le veux. J'essaie de rendre l'en-tête et le menu toujours visibles et de faire en sorte que le contenu occupe le reste de l'écran d'affichage et qu'il ait sa propre barre de défilement lorsqu'il déborde. Le problème est que la largeur du contenu n'est pas étirée vers la droite et j'ai une barre de défilement au milieu de ma page. Je ne peux pas non plus obtenir le reste de la hauteur de la fenêtre restante, si je règle la hauteur à 100%, il veut utiliser toute la hauteur de la fenêtre au lieu de ce qui reste.Comment faire en sorte que le contenu occupe 100% de la hauteur et de la largeur

Je travaille uniquement avec IE7 ou mieux, donc je dois me préoccuper de javascript et je ne suis pas opposé à l'utilisation de jQuery s'il peut résoudre ce problème!

http://pastebin.com/x31mGtXr

Source

2010-05-07 Hiro2k

C'est ainsi qu'il a fini par être curieux. J'ai dû tricher en utilisant du jQuery, mais ça a fait l'affaire et maintenant ça a l'air super quand je le redimensionne aussi. :)

<style type="text/css"> 
     html, body { 
      height: 100%; 
      font-family: 'Calibri','Tahoma','Arial', sans-serif; 
      font-size: 14px; 
      overflow: hidden; 
     } 
     #top{ 
      width: 100%; 
     } 
     #container{ 
      width: 100%; 
      overflow: auto; 
     } 
     #menu { 
      float: left; 
      width: 12em; 
     } 
     #content {     
      overflow: auto; 
      border-left: black solid 1px; 
      padding: 0 0 0 .5em; 
     } 
</style> 

<script type="text/javascript"> 
     function rez(){ 
      $('#content').css('height', $(window).height()-$('#top').height()); 
      $('#content').css('min-height', $('#menu').height());     
      $('#container').css('height', $(window).height()-$('#top').height()); 
     }; 
     $(window).resize(function() { 
      rez(); 
     }); 
     $(window).load(function() { 
      rez(); 
     }); 
</script> 


<body> 
    <div id="top"> 
     <tiles:insert page='/WEB-INF/jsp/template/header.jsp'/> 
     <div id="top-space" style="border-bottom: gray solid 1em;"></div> 
    </div>   
    <div id="container">    
     <div id="menu"> 
      <tiles:insert page='/WEB-INF/jsp/template/menu.jsp'/> 
     </div> 
     <div id="content"> 
      <tiles:get name='content'/> 
     </div> 
    </div> 
</body>

Source

2010-05-07 22:14:00 Hiro2k

Comme this?

html, body { 
    height: 100%; 
    font-family: 'Calibri','Tahoma','Arial', sans-serif; 
    font-size: 14px; 
    margin:0; 
    padding:0; 
} 
#container{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 
#content { 
    min-height: 100%; 
    overflow: auto; 
    height:90%; 
    float: left; 
    margin-left:12em; 
    border-left: black solid 1px; 
    padding: 0 0 0 .5em; 
}

Source

2010-05-07 16:31:00

Fermer mais je reçois toujours une barre de défilement au milieu du navigateur lorsque le contenu déborde. – Hiro2k

Si vous obtenez une barre de défilement horizontale, vous pouvez essayer de mettre 'width' sur' # content'. Je suis terriblement désolé mais je n'ai pas IE7 maniable en ce moment pour le tester, mais notez aussi que cela ne fonctionne pas dans Chrome (avec 'width' sur' # content' en%, mais cela fonctionne si vous le configurez en px ou em.) –

Je reçois la barre de défilement verticale au milieu de la fenêtre. Je peux définir la largeur #content, mais comment puis-je savoir combien d'espace est nécessaire pour remplir le reste de la fenêtre? – Hiro2k

Retirez la déclaration du flotteur sur la div « contenu » et il s'ajustera la largeur mère, retirez la marge sur ce même div parce qu'il est inutile et est à l'origine de la question Chrome. Re: le problème de hauteur ... est-ce que le div "haut" est une hauteur définie? Si oui, vous pourriez avoir une configuration comme le (quoique un peu sale) suivante:

#container { 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 
#top { 
    height: 100px; // assumes top has a defined height 
    left: 0; 
    position: absolute; // lay it on top of the page 
    top: 0; 
    width: 100%; 
} 
#menu { 
    float: left; 
    margin-top: 100px; // push content down by value of top 
    width: 12em; 
} 
#content { 
    height: 100%; 
    overflow: auto; 
} 
#topSpacer { 
    height: 100px; // push content down by value of top 
}

ajoutez simplement l'entretoise au contenu bien:

<div id="content"><div id="topSpacer"></div></div>

Si vous êtes strict sur votre sémantique, ou le div "top" est de largeur variable, alors vous pouvez générer une solution JavaScript où vous définissez la hauteur de "contenu" à la hauteur de "top" + (la hauteur de la fenêtre - "top") sur le chargement et lorsque le navigateur est redimensionné. Assez banal à faire avec un cadre comme jQuery, pas tellement sans un. Enlever votre marge de gauche.

Source

2010-05-07 18:11:38 Andrew

Cela devrait fonctionner je pense. Il ne fait pas de différence dans FF et il ne fonctionnera toujours pas dans Chrome, mais il devrait suffire pour IE. –

Oui, la barre de défilement sur la droite va sous le navigateur, c'est un peu difficile à décrire. Voici une photo. Comme Billy l'a dit, supprimez la marge aussi, cela va résoudre les problèmes dans Chrome. http://img687.imageshack.us/img687/4526/22037006.png – Hiro2k

Consultez également le post mis à jour sur le problème dans la capture d'écran. – Andrew

Lorsqu'un élément flottant contient un remplissage du même côté que celui flottant, IE doublera la marge. Ajoutez-le au rembourrage ou mieux encore, au rembourrage de l'élément qu'il contient .. comme P.

Source

2010-05-07 18:35:55 Billy

J'ai supprimé la marge et l'ai remplacée par un remplissage 1em. J'ai oublié de mentionner cela. – Hiro2k

Juste pour que nous soyons tous clairs, ceci est la version actuelle du document que j'ai et il montre le comportement et la capture d'écran dans Chrome, Firefox et IE7. http://pastebin.com/FiUC0zcC – Hiro2k

Comment faire en sorte que le contenu occupe 100% de la hauteur et de la largeur

Répondre

Questions connexes