All geek questions in one place

Set the list on one page and save the position coefficient

I have an html list that consists of several elements, each of which consists of some text and an image. I want the following:

  • all items should fit on one page (no scroll bar)
  • each element must have the same height (resize the image according to the height of the element)
  • The image should use the remaining space in the list of elements that is not taken by the text

Edit: so to be clear, assuming the browser height is X, and there are n list items (li), each li must have a height of X / n pixels so that they all match the height of the browser without any scroll bar. And from there, inside each li, the text should take any space that it needs, and the image should fill the remaining space

I tried playing with height and maximum height but it doesn't seem to work. Should I change the html layout?

Here is the html code:

<html> <head> <style type="text/css"> </style> </head> <body> <div> <ul> <li> <div>title1</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> </li> <li> <div>title2</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> </li> <li> <div>title3</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> </li> <li> <div>title4</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> </li> <li> <div>title5</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> </li> <li> <div>title6</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> </li> <li> <div>title7</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> </li> <li> <div>title8</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> </li> </ul> </div> </body> <html>
+5
source share
1 answer

I do not think this is only possible with CSS. The JS solution will look like this:

 document.addEventListener("DOMContentLoaded", setLiHeight); window.addEventListener("resize", setLiHeight); function setLiHeight() { let ul = document.querySelector("ul"); let lis = ul.querySelectorAll("li"); let title = ul.querySelector("div"); let images = ul.querySelectorAll("img"); // Set height for lis Array.from(lis, function(li) { li.style.height = ul.offsetHeight / lis.length - 1 + "px"; }); // Set height for images according to height title Array.from(images, function(img) { img.style.height = ul.offsetHeight / lis.length - title.offsetHeight + "px"; }); } 
 html, body { margin: 0; } ul { height: 100vh; margin: 0; } li img { width: auto; } 
 <ul> <li> <div>title1</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </li> <li> <div>title2</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </li> <li> <div>title3</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </li> <li> <div>title4</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </li> <li> <div>title5</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </li> <li> <div>title6</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </li> <li> <div>title7</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </li> <li> <div>title8</div> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> </li> </ul>

The only assumption made here is that the list height is fixed.

0
source

Source: https://habr.com/ru/post/1271918/

More articles:


All Articles