Wenn 100 vh zu hoch sind – ganzseitiges Bildelement dynamisch auf exakte Höhe bringen

Für ein Projekt mit einem großen Bild nach dem Site-Header (Logo / Menü) soll das Bild nicht nur die gesamte Breite, sondern auch die volle Höhe der Seite (bis zum unteren Rand des Browserfensters) einnehmen. Allerdings gibt es noch den Header, der an der Bildung der Gesamthöhe beteiligt ist.

Hinzu kommt die Adminbar für angemeldete User, und fallweise könnte noch ein Element unter dem Header mit aktuellen Ansagen vorgesehen sein. Man weiß also nie genau, wie viele Pixel von der Gesamthöhe 100vh abzuziehen sind.

Je nach Fensterbreite variieren die Höhen der Elemente, deren Gesamthöhe von 100vh des Headerbilder abzuziehen ist. Diese können via Javascript dynamisch berechnet, und am Ende der Gesamtwert abgezogen werden.

if (typeof jQuery !== 'undefined') {
	jQuery(document).ready(function($) {
	  var adjustheight = function() {
		  var heightadminbar = 0;
		  var heightheader = $('#masthead').height();
		  var heightmessage = 0;
		  if ( $('#wpadminbar').height() ) {
			  heightadminbar = $('#wpadminbar').height();
		  }
		  if ( $('#accouncement').height() ) {
			  heightmessage = $('#accouncement').height();
		  }
		  var fullheight = 1*(heightadminbar+heightheader+heightmessage);
		  $('.my-full-height-element').css( "min-height", "auto" ); // nur für den fall, dass min-height mit 100vw definiert wurde
		  $('.my-full-height-element').css( "height", "calc( 100vh - " + fullheight + "px)" );
	  };
	  adjustheight();
	  $(window).resize(adjustheight);
	});
}