Is it possible to create a website that is responsive in width and height?

Question

HTML

Good day. During the development of the site, doubts arose. Is it possible to make an adaptive layout of the main page so that all blocks are visible on any monitor without scrolling horizontally and vertically.
Examples in the attachment:
1920x1080

1280x800

768x1024

Thank you.

Answer 1

Here is an example on flexbox: codepen.io/anon/pen/doRqYq
But this is more for general development

Answer 2

Try viewport units: vw, vh, vmin, vmax .

Answer 3

Easy) To adjust to screen height

function setHeiHeight() {
    $('.min_height').css({
      height: $(window).height() + 'px'
    });
  }
  setHeiHeight(); // устанавливаем высоту окна при первой загрузке страницы
  $(window).resize( setHeiHeight ); // обновляем при изменении размеров окна

and in html we write

<meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=1000">

and
And for the width, already use media queries htmlbook.ru/css/value/media
ps Of course, the entire site should be in 1 block with the min_height class in my case

Answer 4

Try like this codepen.io/Rodion77/pen/XbgPEE?editors=110