Hauteur Fluide ?

cedricbujon · 11 Août 2004

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

kozlika · 11 Août 2004

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:

cedricbujon · 11 Août 2004

j'ai pas mal naviguer sur alsace création mais je n'ai pas réussi grand chose....

Ouais, le tab..... vive les CSS alors :whistling: :down:

Monique · 11 Août 2004

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

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 ?

cedricbujon · 11 Août 2004

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

LaurentDenis · 11 Août 2004

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.

cedricbujon · 11 Août 2004

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:

ste · 12 Août 2004

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:

cedricbujon · 12 Août 2004

Merci ste,

donc... presque autant dire impossible :down: :evil:

kozlika · 12 Août 2004

Je dirais plutôt que c'est IE qui est impossible (et avec les mêmes 3 smileys )

cedricbujon · 13 Août 2004

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

ste · 13 Août 2004

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

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

:hypocrite:

cedricbujon · 14 Août 2004

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:

Raphael · 14 Août 2004

- 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?)

Hells_Dark · 18 Août 2004

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 .

Modifié 18 Août 2004 par Hells_Dark

Raphael · 18 Août 2004

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

coachllb · 18 Août 2004

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 @*/

cedricbujon · 19 Août 2004

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 :

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: ??

Anaon · 20 Février 2006

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

Connexion

Hauteur Fluide ?

Sujets conseillés

cedricbujon

kozlika

cedricbujon

Monique

cedricbujon

LaurentDenis

cedricbujon

ste

cedricbujon

kozlika

cedricbujon

ste

cedricbujon

Raphael

Hells_Dark

Raphael

coachllb

cedricbujon

Anaon

Veuillez vous connecter pour commenter

Parcourir

Activité