Aller au contenu

Hauteur Fluide ?

cedricbujon

Par cedricbujon
dans (X)HTML et CSS

 Partager

Sujets conseillés

cedricbujon

cedricbujon

Posté
Posté

Bonjour à tous,

je suis prêt à raccrocher mes essais de découverte des CSS :angry: (après pas mal de semaines d'arrêt), car je n'arrive pas à obtenir ce que je souhaite malgré de très nombreuses recherches et lectures....

J'aimerai un site fluide (en largeur) en hauteur, mais là, je n'arrive pas à mes fins :

un DIV En tete , un DIV Pied de page et un DIV centre qui vienne "combler" l'espace entre les 2 et s'étire, quel que soit le contenu....

Comment parvenir à créer ceci ??? :blink:

Merci de votre aide

Lien vers le commentaire
Partager sur d’autres sites
kozlika

kozlika

Posté
Posté

Tiens, on se recroise ;)

Je n'avais pas compris ta question dans ce sens-là sur Yahoo Groupes, je croyais que tu parlais de deux div de chaque côté et non d'un en-tête et un pied de page :wacko:

Là, je sèche, je l'avoue. J'entrevois quelques solutions avec les navigateurs modernes mais avec IE ça risque d'être galère, comme tu peux le voir là : http://www.alsacreations.com/blog/index.ph.../05/13/3-height

Je me demande si ce n'est pas LA situation où un ch'ti tableau à trois cellules, sans rien dire à personne... :whistling:

Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

Bonjour cedricbujon,

Et bienvenue sur le Hub :)

... même si tu arrives pour nous dire que tu vas raccrocher tes essais CSS !

Tu n'imagines quand même pas que nous allons te laisser faire si facilement :P

J'ai l'impression que je ne comprends pas bien ton problème parce que ceci serait trop simple :unsure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Untitled</title>
<style type="text/css">
 <!--

 .entete {
 	background-color: #ADD8E6;
 }
 .contenu {
 	background-color: #EEE8AA;
 }
 .pied {
 	background-color: #ADD8E6;
 }
 -->
</style>
</head>
<body>
<div class="entete">bloc en-tête</div>
<div class="contenu"> </div>
<div class="pied">bloc pied</div>
</body>
</html>

Si non, as-tu une page test à nous proposer ?

Lien vers le commentaire
Partager sur d’autres sites
cedricbujon

cedricbujon

Posté
  • Auteur
Posté

Bonsoir Monique,

Ben par fluide, j'entends qui s'adapte sur toute la hauteur de la fenetre du navigateur :

1- l'entête de hauteur fixée (99 px).

2- Le pied de page en "bas" de la fenêtre donc et de hauteur fixée (40 px).

3- le centre qui remplit tous l'espace laissé entre les 2 divs précédentes quel que soit le contenu....

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

Si ton en-tête et ton pied de page sont supposés occuper cette place dans la zone d'affichage du navigateur, et non dans la hauteur de la page scrollée...

- utilise un iframe ou une div scrollable via CSS (le scroll résoudra ton problème)

- ou utilise des tableaux, si ceux-ci t'apportent une solution.

En effet, si c'ets bien le cas, il s'agit :

- de figer deux zones (en-tête et pied) de hauteur fixe, ce qui ne pose pas de pb en soi,

- mais de contraindre un contenu à s'adapter à la hauteur resultante, et non le contraire. Or CSS est conçue pour permettre à une zone d'affichage de s'adapter à l'étendu de son contenu (c'est la notion de flux). Pas le contraire.

Pour cela, il faudrait rendre relatif à une hauteur fixe en pixels :

- la tailles des polices, (font-size)

- la hauteur de ligne (line-height)

- les padding et margin verticaux

Et réussir à tenir compte de la capacité du navigateur à redimensionner les polices (et du coup la hauteur de line).

En gros, ce que tu veux faire, ce n'est pas adapter une présentation à un contenu, mais l'inverse : adapater un contenu à la surface disponible pour sa présentation.

C'est impossible en CSS, tout simplement parce que c'est contraire aux mécanismes de base du rendu graphique d'un document HTML, avec ou sans CSS.

Lien vers le commentaire
Partager sur d’autres sites
cedricbujon

cedricbujon

Posté
  • Auteur
Posté

Bonsoir LaurentDenis,

utilise un iframe ou une div scrollable via CSS (le scroll résoudra ton problème)

Oui, d'accord : mais si le contenu est peu important ? comment obliger la DIV à occuper tout l'espace ? Je parle de la DIV mais pas du contenu... le contenu occupe la place qui lui est nécessaire mais la DIV s'étend sur toute la surface disponible...

C'est vraiment contraire à l'esprit CSS ??? :blink:

Lien vers le commentaire
Partager sur d’autres sites
ste

ste

Posté
Posté

Il existe bien un paramètre CSS pour cela, sauf que MSIE ne le reconnait en rien !!!

Donc, il n'en tiendra pas compte...

Ainsi pour ta div du milieu, tu peux user de :

min-height:

Lien vers le commentaire
Partager sur d’autres sites
ste

ste

Posté
Posté
Ben oui ..... mais c'est le plus utilisé !!  :angry:

Bienvenue dans les turpitudes du dev web ... grâce à ... MISE ... pardon MSIE !

:hypocrite::hypocrite::hypocrite:

Lien vers le commentaire
Partager sur d’autres sites
cedricbujon

cedricbujon

Posté
  • Auteur
Posté

donc, malgré mon envie d'apprendre les CSS, je doit malgré tout réaliser un Tableau pour ma mise en page (ceci dit j'ai vu pas mal de sites créés par des tableaux mis en forme par CSS :wacko: c'est certainement la raison) :blink::blink:

Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté
- utilise un iframe ou une div scrollable via CSS (le scroll résoudra ton problème)

Autre problème : d'après mes expériences, Mozilla ne reconnait pas la hauteur en % sur les div avec overflow (quelqu'un peut confirmer?)

Lien vers le commentaire
Partager sur d’autres sites
Hells_Dark

Hells_Dark

Posté
Posté (modifié)

Heu... le problème est que tu veux que ça prenne toujours la taille de la fenêtre en hauteur au minimum ou alors tout le temps ?

html>body #contenu {
min-height : 500 px /* ou une autre hauteur */
}
#contenu {
height : 500px
}

Et puis tu ajoute le scroll si tu veux que ça ne dépasse jamais cette hauteur...

cela ne te convient pas ? :S

Sinon, ces modéles de mise ne page que je viens de trouver sur alsacreation devraient t'aider :P .

Modifié par Hells_Dark
Lien vers le commentaire
Partager sur d’autres sites
Raphael

Raphael

Posté
Posté 
html>body #contenu {
min-height : 500 px /* ou une autre hauteur */
}
#contenu {
height : 500px
}

Tiens, j'ai déjà vu ce code quelque part récemment :)

Lien vers le commentaire
Partager sur d’autres sites
coachllb

coachllb

Posté
Posté

bonjour,

il existe une petite application en javascript qui résout le pb de compatibilité de min-height pour IE

Elle s'appelle minmax : la voici si tu veux

a+

/ minmax.js: make IE5+/Win support CSS min/max-width/height
// version 1.0, 08-Aug-2003
// written by Andrew Clover <and_AT_doxdesk.com>, use freely

/*@cc_on
_AT_if (@_win32 && _AT__jscript_version>4)

var minmax_elements;

minmax_props= new Array(
  new Array('min-width', 'minWidth'),
  new Array('max-width', 'maxWidth'),
  new Array('min-height','minHeight'),
  new Array('max-height','maxHeight')
);

// Binding. Called on all new elements. If <body>, initialise; check all
// elements for minmax properties

function minmax_bind(el) {
  var i, em, ms;
  var st= el.style, cs= el.currentStyle;

  if (minmax_elements==window.undefined) {
    // initialise when body element has turned up, but only on IE
    if (!document.body || !document.body.currentStyle) return;
    minmax_elements= new Array();
    window.attachEvent('onresize', minmax_delayout);
    // make font size listener
    em= document.createElement('div');
    em.setAttribute('id', 'minmax_em');
    em.style.position= 'absolute'; em.style.visibility= 'hidden';
    em.style.fontSize= 'xx-large'; em.style.height= '5em';
    em.style.top='-5em'; em.style.left= '0';
    if (em.style.setExpression) {
      em.style.setExpression('width', 'minmax_checkFont()');
      document.body.insertBefore(em, document.body.firstChild);
    }
  }

  // transform hyphenated properties the browser has not caught to camelCase
  for (i= minmax_props.length; i-->0;)
    if (cs[minmax_props[i][0]])
      st[minmax_props[i][1]]= cs[minmax_props[i][0]];
  // add element with properties to list, store optimal size values
  for (i= minmax_props.length; i-->0;) {
    ms= cs[minmax_props[i][1]];
    if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {
      st.minmaxWidth= cs.width; st.minmaxHeight= cs.height;
      minmax_elements[minmax_elements.length]= el;
      // will need a layout later
      minmax_delayout();
      break;
  } }
}

// check for font size changes

var minmax_fontsize= 0;
function minmax_checkFont() {
  var fs= document.getElementById('minmax_em').offsetHeight;
  if (minmax_fontsize!=fs && minmax_fontsize!=0)
    minmax_delayout();
  minmax_fontsize= fs;
  return '5em';
}

// Layout. Called after window and font size-change. Go through elements we
// picked out earlier and set their size to the minimum, maximum and optimum,
// choosing whichever is appropriate

// Request re-layout at next available moment
var minmax_delaying= false;
function minmax_delayout() {
  if (minmax_delaying) return;
  minmax_delaying= true;
  window.setTimeout(minmax_layout, 0);
}

function minmax_stopdelaying() {
  minmax_delaying= false;
}

function minmax_layout() {
  window.setTimeout(minmax_stopdelaying, 100);
  var i, el, st, cs, optimal, inrange;
  for (i= minmax_elements.length; i-->0;) {
    el= minmax_elements[i]; st= el.style; cs= el.currentStyle;

    // horizontal size bounding
    st.width= st.minmaxWidth; optimal= el.offsetWidth;
    inrange= true;
    if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') {
      st.width= cs.minWidth;
      inrange= (el.offsetWidth<optimal);
    }
    if (inrange && cs.maxWidth && cs.maxWidth!='none' && cs.maxWidth!='auto' && cs.maxWidth!='') {
      st.width= cs.maxWidth;
      inrange= (el.offsetWidth>optimal);
    }
    if (inrange) st.width= st.minmaxWidth;

    // vertical size bounding
    st.height= st.minmaxHeight; optimal= el.offsetHeight;
    inrange= true;
    if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') {
      st.height= cs.minHeight;
      inrange= (el.offsetHeight<optimal);
    }
    if (inrange && cs.maxHeight && cs.maxHeight!='none' && cs.maxHeight!='auto' && cs.maxHeight!='') {
      st.height= cs.maxHeight;
      inrange= (el.offsetHeight>optimal);
    }
    if (inrange) st.height= st.minmaxHeight;
  }
}

// Scanning. Check document every so often until it has finished loading. Do
// nothing until <body> arrives, then call main init. Pass any new elements
// found on each scan to be bound   

var minmax_SCANDELAY= 500;

function minmax_scan() {
  var el;
  for (var i= 0; i<document.all.length; i++) {
    el= document.all[i];
    if (!el.minmax_bound) {
      el.minmax_bound= true;
      minmax_bind(el);
  } }
}

var minmax_scanner;
function minmax_stop() {
  window.clearInterval(minmax_scanner);
  minmax_scan();
}

minmax_scan();
minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY);
window.attachEvent('onload', minmax_stop);

_AT_end @*/

Lien vers le commentaire
Partager sur d’autres sites
cedricbujon

cedricbujon

Posté
  • Auteur
Posté
Heu... le problème est que tu veux que ça prenne toujours la taille de la fenêtre en hauteur au minimum ou alors tout le temps ?

euh :wacko: je ne saisi pas trop la différence....

Les modèles d'alsace création sont pas tout à fait adaptés à une hauteur fluide avec pied et en-tête fixe :

hauteur-fluide.gif

le seul modèle à hauteur fluide est un modèle"détourné" où le contenu est fluide (OK pour cela) mais fait office également de pied.....

Merci coachllb pour ton code javasript mais je trouve cela très lourd (mais il me reste certainement que cela...)

Beaucoup de sites sont fluides en largeur, mais apparemment avoir une fluidité en hauteur ne se fait pas :wacko: ??

Lien vers le commentaire
Partager sur d’autres sites
  • 1 year later...
Anaon

Anaon

Posté
Posté

Bonjour,

Excusez-moi de ressortir ce vieux sujet mais je me demandais s'il n'y avait pas par hasard de nouvelles méthodes pour parvenir à ce qu'une div fasse 100% de la fenêtre, quelque soit la taille de cette fenêtre... J'ai lu pas mal d'article mais sans succès...

Y-a-t-il une solution ou une alternative?

Merci beaucoup...

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...