Div scrollable dans une div occupant au max la taille de la fenetre

Question

23 Oct 2008 à 13:56

Bonjour,
Tout est dans le titre.
Voilà ce que je souhaiterai réaliser comme effet :
1-avoir une div cadre qui s'adapte automatiquement aux dimensions de la fenêtre en hauteur (sans javascript) et qui soit toujours centrée horizontalement.
2-à l'intérieur de cette première div avoir une div scrollable qui occupe une place définie dans le cadre et qui soit scrollable SI BESOIN EST.

Alors bon forcément j'ai tenté un truc !
La div cadre centrée automatiquement horizontalement, ça ça fonctionne bien.
Voici le code html :


<body class="body_skin" onload=initAd() >

<div id="main" class="main_div">

<div id="display_div" class="display_div">

<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed

</div>
</div>

Et le ptit css qui va avec :


body 
	{
	margin: 0;
	background: #365265;
	font: 12px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
	line-height: 1.5;
	color:#60789E;
	height: 100%;
	}

.main_div 
	{
	overflow: hidden;
	max-width: 60em;
	min-width: 820px;
	margin: 0.5em auto;
	padding: 10px 25px;
	border: 1px solid #ccc;
	}
.display_div 
	{
	overflow: auto;
	height: auto;
	width: auto;
	background: white;
	border-color: #1D2531;
	border-style: solid;
	border-width: 2px;
	margin-bottom :3px;
	}

Je ne vois pas de scroll et pour l'ajustement en hauteur ça ne marche pas.

Merci de votre aide ! Smiley biggol

fvsch

23 Oct 2008 à 14:41

Le jong le plus lour a écrit :
Voilà ce que je souhaiterai réaliser comme effet :
1-avoir une div cadre qui s'adapte automatiquement aux dimensions de la fenêtre en hauteur (sans javascript) et qui soit toujours centrée horizontalement.
2-à l'intérieur de cette première div avoir une div scrollable qui occupe une place définie dans le cadre et qui soit scrollable SI BESOIN EST.

Tu es sûr de la pertinence de cet effet? Dans la plupart des cas, c'est surtout une bêtise en termes d'ergonomie.

Sinon, en passant: déjà entendu parler de position: fixed?
(À utiliser avec la plus extrême modération.)

BeliG

23 Oct 2008 à 14:44

Hello

Si ça ne te dérange pas, je vais te proposer une solution en partant de zéro :

a écrit :
1-avoir une div cadre qui s'adapte automatiquement aux dimensions de la fenêtre en hauteur (sans javascript) et qui soit toujours centrée horizontalement.

XHTML

<body>

     <div id="global"> 

          <!-- <div> centrée horizontalement et qui prend toute la hauteur de la page. -->

     </div>

</body>

CSS

html, body {
height: 100%; }

div#global {
width:...px; /* largeur à définir */
margin:0 auto;
min-height: 100%; }

#global { /* Pour IE6, via Commentaires Conditionnels */
height: 100%; }

a écrit :
2-à l'intérieur de cette première div avoir une div scrollable qui occupe une place définie dans le cadre et qui soit scrollable SI BESOIN EST.

XHTML

<body>

     <div id="global"> 

          <div id="scroll">

               <!-- <div> qui fait apparaître la scrollbar si le contenu est supérieur à ses dimensions fixées -->

          </div>

     </div>

</body>

CSS

div#scroll {
width:...px; /* largeur à définir */
height:...px; /* hauteur à définir*/
overflow:auto; /* pour faire apparaître les scrolls */ }

Voilà, il te reste plus qu'à expliquer ce que tu appelles une place définie dans le cadre, pour t'aider à placer cette <div>.

EDIT :
En lisant le message de Florent, j'suis plus sûr d'avoir bien compris ton problème Smiley ravi

Quel effet souhaites-tu mettre en place concrètement ? (une capture d'écran ou autre image pourrait aider Smiley cligne

)
Modifié par BeliG (23 Oct 2008 - 14:49)

Le jong le plus lour

23 Oct 2008 à 14:47

Florent V. a écrit :

Tu es sûr de la pertinence de cet effet? Dans la plupart des cas, c'est surtout une bêtise en termes d'ergonomie.

Sinon, en passant: déjà entendu parler de position: fixed?
(À utiliser avec la plus extrême modération.)

C'est quoi qui n'est pas pertinent exactement ?
Un redimensionnement c'est utile.
Le plus dur c'est de limiter la taille de la div intérieure pour que ce qu'elle contient reste visible et donc d'afficher le scroll.

C'est pas tellement la position qui me gène c'est surtout la hauteur de la div intérieure. Elle ne tient pas compte du cadre et est plus grande (comme si elle passait dessous le cadre) et n'affiche pas de scrollbar.

Le jong le plus lour

23 Oct 2008 à 14:56

J'vas faire un schéma !
Smiley lol

Modifié par Le jong le plus lour (23 Oct 2008 - 15:08)

Le jong le plus lour

23 Oct 2008 à 15:10

Ala :
http://bertonf.free.fr/sch.jpg

Donc en :

1- la page normale avec dans la div intérieure (bleue) un texte court.

2- la page normale avec dans la div intérieure (bleue) un texte long imposant l'apparition automatique d'un scroll (vert).

3- la page resizée (réduite) avec dans la div intérieure (bleue) un texte long imposant l'apparition automatique d'un scroll.

Euh c'est mieux ? Smiley rolleyes

Modifié par Le jong le plus lour (23 Oct 2008 - 15:10)

BeliG

23 Oct 2008 à 15:18

Ok je crois comprendre... Mais encore quelques questions Smiley langue

Comment se positionne la div en bleue (pas d'importance ? en bas de la page comme sur ton schéma ?).

Sa hauteur est-elle proportionnelle à la hauteur de la fenêtre (comme le laisse croire ton schéma n°3) ?
Modifié par BeliG (23 Oct 2008 - 15:18)

Le jong le plus lour

23 Oct 2008 à 15:27

BeliG a écrit :
Ok je crois comprendre... Mais encore quelques questions

Comment se positionne la div en bleue (pas d'importance ? en bas de la page comme sur ton schéma ?).

Sa hauteur est-elle proportionnelle à la hauteur de la fenêtre (comme le laisse croire ton schéma n°3) ?

Pas de problème, questions légitimes en plus !
1-En fait ouais la div bleue est en bas. Le bas de la div bleue occupe tout l'espace restant jusqu'au bord de la div globale (avec un petit retrait pour faire beau ! Smiley ravi

). Le haut de la div bleue tapera dans le bas d'une div que j'ai pas dessiné pour pas surcharger. En gros elle occupe tout ce qui reste comme espace.

2-En fait, ouais la dimension de la div bleue diminue si la page est réduite. Elle suit bien les dimensions de la div globale. Par contre j'aimerais bien fixer (si c'est possible) un minimum de hauteur pour la div bleue pour pas qu'elle soit réduite à 0 px !

Encore merci pour le temps que tu passes !

gcyrillus

Modérateur

23 Oct 2008 à 15:44

Bonjour,

en passant , ça ressemble a du frameset tout ça Smiley smile

.

En effet difficile de séparé une hauteur d'ecran en 2 , avec d'un coté une valeur fixe et de l'autre un (pourcentage - la premiere valeur fixe) ... CSS n'est pas un langage de programmation , juste de mise en forme .

ça va forcement tombé dans la bidouille Smiley smile

, surtout coté IE qui a toujours une drôle de façon de calculer et d'arrondir les choses différemment .

1 test sur div , comme compris au debut : (passe pas trop mal dans IE)
Le positionnement absolu plus coordonnées sont mise a contribution pour dimensionné #main.
(css a ajouté a prés le tien pour test , basé sur ton premier post)

/* Layout proposé par gcyrillus [smile] */
/* approche differente dans IE , ... même IE7 : voir CC plus bas */

html , body {
	height:100%;
	padding:0;margin:0;
}
 #main {
	position:absolute;
	top:0.5em;
	left:0;
	bottom:0.5em;
	right:0;
}
#display_div {
	height:100%;
	}

puis pour IE

<!--[if lte IE 7]>
<comment>Commentaire Conditionnels initialement implémentés pour IE 6
mais de fait , IE7 bug sur le css commun .</comment>
<style>
html , body , #main {
	overflow:hidden;
	height:100%;
	text-align:center;
	padding:0;
}
#main {
	width:780px;
	margin:0;
	height:95%;
	margin-top:1%;
	text-align:left;
	top:auto;
	left:auto;
	right:auto;
	bottom:auto;
	margin-left:-390px;
}
#display_div {
	overflow:auto;
	height:96%;
	margin:10px 25px;
	width:auto;
	}
/* min-width html ( astuce impôsé par IE6) */
html {overflow-x:auto;}/* on recupere le scroll horizontal */
body {padding:0 400px;} /* body ne fera donc jamais moins de 800px de large dans IE en mode standard  */
</style>
<![endif]-->

Pour faire 2 zones , ça devient encore pluche bricole :

dans les cc pour IE par exemple :

#display_div {
	overflow:auto;
	height:65%;
	margin:20% 1em 0;
	width:auto;
	}

et css commun :

#display_div {
	height:70%;
	margin-top:25%;
	}

Autant , la premiere solution pourrait allez , autant pour la seconde , c'est du frameset a mettre en place :
par exemple en xhtml :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Enfin , c'est juste mon avis Smiley smile

.

++

fvsch

23 Oct 2008 à 15:54

Le jong le plus lour a écrit :
C'est quoi qui n'est pas pertinent exactement ?

Les barres de défilement internes (permettant de faire défiler le contenu d'un bloc précis). C'est souvent pas terrible à utiliser. Quand en plus on fait l'erreur de créer disons un bloc de hauteur 80% de la page et d'y placer une barre de défilement, ça devient assez immonde.

Et vu tes schémas, tu es dans la configuration «machin assez immonde». À oublier.
(Et continuer à se familiariser avec le design web, les spécificités du média screen, etc. Smiley cligne

)

(Mais si vraiment on veut le faire, eh bien on évacue IE6 -- dégradation gracieuse, etc. --, et on utilise le positionnement absolu avec les propriétés top et bottom.)
Modifié par Florent V. (23 Oct 2008 - 15:57)

Le jong le plus lour

23 Oct 2008 à 16:56

Bon ...
Beh en fait je me fous complètement si ça fait immonde, c'est fonctionnel pour ce que je veux faire.

Je vais tenter le coupe avec une frame, ce sera ptet plus simple. Peut on mettre une frame dans une div ?

fvsch

23 Oct 2008 à 17:57

Le jong le plus lour a écrit :
Je vais tenter le coupe avec une frame, ce sera ptet plus simple. Peut on mettre une frame dans une div ?

Avec une iframe, oui.

Le jong le plus lour

23 Oct 2008 à 18:00

Et on peut en controler height par DOM ?

du genre : document.getelementbyid("iframe").height ?

fvsch

23 Oct 2008 à 18:22

Plutôt du genre:

document.getElementById("id_de_mon_iframe").style.height='Npx'

On devrait également pouvoir appliquer le positionnement absolu dont je parlais (pas compatible IE6, certes, mais dans ce cas on pourra utiliser JavaScript justement, juste pour IE6). À vérifier, je n'ai jamais essayé avec une iframe.

Le jong le plus lour

24 Oct 2008 à 16:13

Florent V. a écrit :
Plutôt du genre:
document.getElementById("id_de_mon_iframe").style.height='Npx'
On devrait également pouvoir appliquer le positionnement absolu dont je parlais (pas compatible IE6, certes, mais dans ce cas on pourra utiliser JavaScript justement, juste pour IE6). À vérifier, je n'ai jamais essayé avec une iframe.

En fait quand je mets le .style, ça ne marche plus ... Smiley ohwell

Sujet clos

CSS et mise en forme, CSS3

Div scrollable dans une div occupant au max la taille de la fenetre