28172 sujets

CSS et mise en forme, CSS3

[Résolu] Partage de la hauteur d'un conteneur entre div de type différ

Chers Alsacocréationnistes,

j'ai un souci de hauteur de div que je n'arrive pas à régler malgré mes recherches sur qwant.
J'expose direct le problème :

1) j'ai une div principale (appelons- la A) dont la hauteur est relative à celle de la fenêtre moins la hauteur de l'en-tête de ma page : 
height: calc(96vh - 90px)


2) dans celle-ci j'en ai deux
- une contenant du texte (appelons-la B1) et dont la hauteur est dynamique de manière à ne pas tronquer ce texte : 
height: auto

- une seconde (appelons-la B2, celle qui me Broute) qui contient des illustrations des tableaux… bref un tas de trucs dont on s'en fout et pour laquelleje voudrais que la hauteur occupe au maximum la hauteur de ma div principale (A) moins la hauteur de la div dynamique (B1)

évidemment j'ai activé 
overflow: auto

ça fonctionne bien lorsque le contenu de B2 depasse la largeur de A, mais ça ne fonctionne pas verticalement.
En effet plutôt que de restreindre la hauteur B1+B2 à la hauteur de A, quitte à afficher les ascenseurs sur B2, ma div B2 dépasse verticalement de la div A qui la contient. sans que l'ascenseur Y s'affiche.

évidemment j'ai testé tout un tas de trucs et de combinaisons de height, de display de flex etc mais j'arrive à rien.

Quelqu'un peut t-il m'aider ?


Cordialement,

Kashlm

PS c'est dimanche je suis devant le PC pour encore 1h, ensuite je déconnecte jusqu'à jeudi, donc vous vexez pas si je réagis pas de suite à vos futures magnifiques réponses.
Modifié par kashlm (06 Mar 2021 - 13:11)
Modérateur
Bonsoir,

Aujourd'hui, flex ou grid permettent ce genre de chose aisément: voici un exemple : https://codepen.io/gc-nomade/pen/jOVzzXJ

le CSS de base ressemble a ceci:
en flex :
wrapper {
   height:100vh;
   display:flex;
   flex-direction:column
}
.a { /* on laisse le contenu faire */}
.b{
   flex-grow:1;
   overflow:auto;
}


en grid 
.wrapper {
   height:100vh;
   display:grid;
   grid-template-row: auto 1fr ;
}
.a {/* on laisse le contenu faire */}
.b {
   overflow:auto;
}


Cdt
je te remercie gcyrillus

La solution flex fonctionne en tout cas pour ce qui est du débordement
juste un nouveau souci est apparu,

la première div (a) voit son texte tronqué à environ 75% de sa longueur quelle que soit la longueur de ce texte et la suite du texte réapparaît en surimpression de la div b.

Je regarde ça samedi mais je pense que le problème vient d'ailleurs.

Je testerai également la solution grid

Bonne journée
Modérateur
kashlm a écrit :
je te remercie gcyrillus

La solution flex fonctionne en tout cas pour ce qui est du débordement
juste un nouveau souci est apparu,

la première div (a) voit son texte tronqué à environ 75% de sa longueur quelle que soit la longueur de ce texte et la suite du texte réapparaît en surimpression de la div b.


je t'en prie Smiley smile

Peut-tu faire une démo qui reproduis ton soucis?
Si besoin de discretion, avec du faux texte et sur un site comme https://jsfiddle.net/ (ou autre voir topic https://forum.alsacreations.com/topic-2-87927-1.html pour d'autre éditeur en ligne avec l'option d'enregistrement) .

Les démos en ligne précédemment posté sur codepen ne souffrent apparemment pas de ce défaut.

Cdt
salut,

malheureusement je fais ça depuis un poste du taff et soit les liens donnés plus haut sont verrouillés (par le SI de ma tôle), soit ils ne sont pas compatible avec IE…
… IE, car j'utilise par ailleurs un plug in qui n'est pas développé pour les autres navigateurs.

… et c'est bien dommage car testé sur Firefox c'est nickel

Bon en tout cas mon planning pour demain :

refaire toute ma page en nettoyant le CSS car y se passe des trucs que je capte pas

à demain
Modifié par kashlm (06 Mar 2021 - 14:20)
Du coup j'ai fait le test sur edge, come sur Firefox tes solutions fonctionnent.

Malheureusement faut que ça tourne sur IE 11
<!doctype html>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=11" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<title>TOTO</title>
<style>
	body {
		margin:0px;
		width: 100vw;
		height:100vh;
		overflow: hidden;
		background-color: #2F2F2F;
		background-image:url(toto.gif);
		padding: 20px;
		}
		
	/* DIV Contenu */
	#lgc_contenant{
		border-radius: 10px; background-color: rgba(255,255,255,0.30);
		height: calc(100vh - 40px); width: calc(100vw - 40px);
		padding: 20px;
		}
			#lgc_contenant_g{
				width: calc(100vw - 70px);
				height: calc(100vh - 70px);
				background-color: red
				}
			/*#lgc_contenant_g div{
				margin-bottom: 15px;
				}#lgc_contenant_g div:last-child{
				margin-bottom: 0px;
				}*/
			.lgc_notes {
				height: auto;
				border-radius:10px;
				float: left;
				color: black;
				background-color: white;
				padding-bottom: 20px
				}

			.lgc_illustration{
				border-radius: 10px;
				width: 100%;
				overflow: auto;
				background-color: white
				}
	</style>	

</head>

<body>

	<div id="lgc_contenant" style="">
		
		<div id="lgc_contenant_g" style="">
			
			<div class="lgc_notes" style="">
					
					<p><span>MESSAGE IMPORTANT :</span> Lire ce message avant d'utiliser la barre d'appel<br>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p>
					<p><span>MESSAGE IMPORTANT :</span> Lire ce message avant d'utiliser la barre d'appel<br>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p>
					<p><span>MESSAGE IMPORTANT :</span> Lire ce message avant d'utiliser la barre d'appel<br>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p>
			</div>
			
			
			<!--<div class="lgc_illustration" style="display: inline-block; overflow: auto">-->
			<div class="lgc_illustration" style="">
				<img src="toto.gif" height="800px">
				<img src="toto.gif" height="800px">
				<img src="toto.gif" height="800px">
			</div>
				
			
		</div>
	</div>
			
<!--CONTENU FIN-->

</body>

</html>



D'après ce que je comprends le réglage dynamique de la hauteur des div n'est pas pris en charge par IE…. j'ai le seum

Bref j'essaye de voir si je peux régler ça via javascript
la formule semble simple à priori
H div lgc illustration = H lgc_contenant_g (100vh - 70px) - H div lgc_notes (auto)
mais comment mettre en termes JS ?
Bon ben je désespere

1)
function reglageHauteur(){
var notes = document.getElementById("lgc_notes");
var illustration = document.getElementById("lgc_illustration");
var contenant_g  = document.getElementById("lgc_contenant_g");
/*var h_div_notes = div_notes.style.height;
var h_div_lgc_contenant_g = div_lgc_contenant_g.style.height;*/
var h_notes = notes.style.height;

	console.log(notes.style.height);
}

setTimeout (reglageHauteur, 1000);


me retourne : une ligne vide dans la console

2) 
console.log(notes.style.offsetHeight);


retourne "undefined"

3) 
console.log(notes.style.pixelHeight);


me renvoit "0"

au moins ca me renvoit une valeur, mais pas la bonne !!!

ah ben quand même :
4) 
console.log(notes.clientHeight);


me renvoit une valeur en pixel
Modifié par kashlm (11 Mar 2021 - 01:50)
ah bin mince alors, j'ai trouvé ma solution pour IE 11 :


setTimeout (reglageHauteur, 0);
window.onresize =  reglageHauteur;


function reglageHauteur(){
	var contenant_g  = document.getElementById("lgc_contenant_g");
	var notes = document.getElementById("lgc_notes");
	var illustration = document.getElementById("lgc_illustration");
	var h_contenant_g = contenant_g.clientHeight - 45;
		/*console.log("h_contenant =" + h_contenant_g + "h_contenant/2 =" + h_contenant_g/2);*/
	var h_notes = notes.clientHeight;
	if (h_notes > h_contenant_g/2) {
		h_notes = h_contenant_g/2;
		notes.style.height = h_notes+"px";
		notes.style.overflow = "auto";
			/*console.log('toto');*/
	}
	var h_illustration = h_contenant_g - h_notes;
	illustration.style.height = h_illustration+"px";


	/*console.log(h_illustration, h_contenant_g - h_notes);*/
}


Et je garde la solution "grid" de GCyrillus pour l'affichage sur Edge et Firefox

Merci encore

PS j'attends 3 ou 4 jours pour clôturer, peut-être quelqu'un aur t-il une solution pour IE plus élégante que la mienne
Modérateur
Bonjour,

je n'avais pas remarqué ta précedente réponse.

grid pour IE11 demande une syntaxe différente et n'est que partiellement implémenter. , flex reste plus aisé (pensé a redefinir flex-shrink) :

exemple de ton CSS en flex qui devrait passé dans IE11 :
html {
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
}
body {
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #2f2f2f;
  background-image: url(toto.gif);
  padding: 20px;
  box-sizing: border-box;
}

/* DIV Contenu */
#lgc_contenant {
  box-sizing: border-box;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  height: 100%;
  width: 100%;
  padding: 20px;
}
#lgc_contenant_g {
  width: 100%;
  height: 100%;
  background-color: red;
  display: flex;
  flex-direction: column;
}
.lgc_notes {
  border-radius: 10px;
  flex: 1 0 auto;
  color: black;
  background-color: white;
  padding-bottom: 20px;
  overflow: hidden;
}
.lgc_illustration {
  border-radius: 10px;
  overflow: auto;
  background-color: white;
}


regarde aussi du coté de box-sizing pour eviter calc() dans ce cas :

Cdt
Merci pour ton aide

Je vais tenter ta dernière solution sachant que la mienne fonctionne après quelques jours d'essais dans différentes configurations et avec différents contenus.
Mais c'est du JS , alors si je peux tout régler en css ça rend les choses plus simples.


et je jette un œil sur box sizing que je ne connais pas encore.


En tout cas je pense pouvoir clôturer le sujet.

Bonne journée
Sujet clos
Aller à