☰ RemplirHauteurAvecDiv
 

Remplir la hauteur restante avec un div

En Javascript

Le javascript est plus souple et permet de tenir compte d'un éventuel footer

function getTop(element) {
		var sum = element.offsetTop;
		while(element = element.offsetParent)
			sum += element.offsetTop;
		return sum;
}

function getElementHeight(element) {
	var height = element.clientHeight;
	if (!height) height = element.scrollHeight;
	return height;
}

setTextHeight = function() {
	var footerHeight = getElementHeight(document.getElementById('theFooter'));
	var divTop = getTop(document.getElementById('theDiv'));
	var deduire = footerHeight + divTop + 12;  //ici 12 est le nombre de pixels que l'on souhaite laisser en bas
	document.getElementById('theDiv').style.height = "calc(100vh - " + deduire + "px)";
}

Exemple

En CSS pur:

CSS:

* {
	margin: 0;
}
#div1{
	width: 100%;
	height: 50px;
	background-color:red;
}
#div2{
	width: 100%;
	position: absolute;
	top: 50px;
	bottom: 0;
	background-color:blue;
}

HTML:

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

En fait, seul le div du bas nécessite un positionnement absolu, mais il faut connaître la position du haut.

Exemple 1

En CSS pur, autre solution:

CSS:

* {
	margin: 0;
}
html,body {
	height: 100%; 
	width:100%;
}
body {
	display: table;
}
div {
	width: 100%; 
	background: yellow; 
	display: table-row;
}
div+ div {
	background: pink; 
	height: 100%;
}

HTML:

<body>
<div>hello</div>
<div>there</div>
</body>

Le div du bas va se placer juste sous le div du haut

Exemple 2