Alternatywnie, prawdopodobnie najprostszym sposobem jest użycie element.getBoundingClientRect Javascript w function(). Wymagałoby to umieszczenia tekstu wewnątrz własnego podziału względnego, a następnie zastosowania tej funkcji do obliczenia wysokości gotowego tekstu (w pikselach). Ponieważ używasz stałych wymiarów dla głównego podziału kontenera, możesz następnie obliczyć i wykorzystać pozostałą przestrzeń dla swojego obrazu. Potrzebny może być jeden lub dwa trudne algoski, np. Opracowywanie współczynników proporcji do właściwości wysokości.
Mam nadzieję, że to pomaga; Nie jestem pewien, jak skomplikowane było podejście, którego próbujesz uniknąć.
<head>
<style>
body{
background: #111;
color: #d00;
}
#mainContainerDiv{
top: 20%;
height: 49%;
left: 30%;
width: 40%;
background: #c90;
color: #d00;
position: absolute;
}
#image{
top: 10%;
height: 30%;
left: 30%;
width: 40%;
background: #0d0;
color: #ddd;
position: absolute;
}
#textAtBottom{
bottom: 2%;
/*height: 40%;*/
left: 30%;
width: 40%;
background: #d00;
color: #eee;
padding: 1%;
position: absolute;
}
ABC def ghi jkl ABC def ghi jkl ABC def ghi jkl ABC def ghi jkl ABC def ghi jkl ABC def ghi jkl ABC def ghi jkl zniszczenie karty ghi jkl lorem ipsum doradum etsum ichtum latinum
<!-- <div id="image"> UNCOMMENT THIS WHEN YOU'RE READY
</div> -->
</div><!-- mainContainerDiv-->
<script>
var a = document.getElementById('mainContainerDiv');
var ar = a.getBoundingClientRect();
alert('Main container element is ' + ar.top + 'pixels from its containing element i.e. <body>');
// alert(' und hauptBeinhalter Unten ist ' + ar.bottom ');
// Bildis niedriger, so Teil ist ' + ar.height-ar.top + 'hoch total');
var e = document.getElementById('textAtBottom');
var x = e.getBoundingClientRect();
alert('Text at Bottom starts ' + x.top + ' vertical pixels down from <body>');
var numm = parseInt(x.top)-parseInt(ar.top);
alert('sooooo, you got '+ numm + ' pixels of space above the text to squeeze in your image!!!');
</script>
To byłoby zgodne z zasadą elastycznego projektowania. Daj mi trochę, a ja będę miał dla ciebie odpowiedź. –
Rozproszyłem się, ale wygląda na to, że inni użytkownicy zaproponowali bardzo dobre sugestie. digitaldouble dostarczył eleganckie rozwiązanie tylko css przy użyciu tabel lub flexboxów –