{"id":348201,"date":"2023-05-31T21:01:23","date_gmt":"2023-05-31T21:01:23","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=348201"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=348201","title":{"rendered":"<span>\u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c:\u00a0\u041f\u0430\u043b\u043a\u0438 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<blockquote>\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/articles\/730132\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e\u0431 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u043a\u043e\u0434\u0430, \u043d\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u0432\u0435\u0441\u0435\u043b\u044c\u0435 \u043f\u043e\u0434\u0436\u0438\u0434\u0430\u0435\u0442 \u043d\u0430\u0441 \u0438 \u0432 \u0432\u0435\u0431 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0427\u0438\u0442\u0430\u0435\u043c, \u0443\u043b\u044b\u0431\u0430\u0435\u043c\u0441\u044f \u0438 \u0431\u0435\u0440\u0435\u043c \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443.<\/p>\n<\/blockquote>\n<p>\u041a\u0430\u043a \u0442\u043e \u0442\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u043a &#171;\u0444\u0440\u043e\u043d\u0442\u043e\u0432\u043e\u0439&#187; \u0442\u0435\u043c\u0435, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u044b\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u0431\u0440\u0443\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e windows-\u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430. \u041d\u043e, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0438\u0437\u0440\u0435\u0434\u043a\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e html\/css\/React, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0443\u0434\u0438\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438\u0437\u0432\u0438\u043b\u0438\u0441\u0442\u044b\u043c \u043f\u0443\u0442\u044f\u043c, \u0432\u0435\u0434\u0443\u0449\u0438\u043c \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>Html\/css \u0438 \u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u043c\u043e\u0433\u0443\u0447\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0434\u043b\u044f \u0432\u043e\u043f\u043b\u043e\u0449\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u044b\u0445 \u0441\u043c\u0435\u043b\u044b\u0445 \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432. \u0418, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043f\u0440\u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u043c \u0438 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0432 \u0442\u0435\u043c\u0443 \u0432\u0435\u0440\u0441\u0442\u043a\u0438, \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 &#171;\u043f\u0440\u043e\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u043f\u043e\u0434\u043a\u043e\u0440\u043a\u0435&#187; \u0438 &#171;\u0432\u0435\u0440\u0442\u0438\u0442\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u0447\u0438\u043a\u0430\u0445 \u043f\u0430\u043b\u044c\u0446\u0435\u0432&#187;&#8230;<\/p>\n<p>\u0410 \u043a\u0430\u043a \u0431\u044b\u0442\u044c \u0442\u0435\u043c, \u043a\u0442\u043e \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0438\u044f\u044e\u0449\u0438\u0439 \u043c\u0438\u0440 CSS \u043b\u0438\u0448\u044c \u0438\u0437\u0440\u0435\u0434\u043a\u0430 \u2014 \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438?<\/p>\n<p>\u041b\u0438\u0431\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e \u043e\u0431\u044a\u0435\u043c\u0443 \u0440\u0430\u0431\u043e\u0442 \u0438 \u0443\u0441\u0438\u043b\u0438\u044f \u043f\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043e\u043a\u0443\u043f\u044f\u0442\u0441\u044f?<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0434\u0430\u0436\u0435 \u043d\u0430 \u0432\u043e\u0441\u044c\u043c\u0438\u0434\u0435\u0441\u044f\u0442\u043e\u043c \u044d\u0442\u0430\u0436\u0435 \u043d\u0430\u0441\u043b\u043e\u0435\u043d\u0438\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c React, \u0431\u043b\u0443\u0436\u0434\u0430\u044f \u043f\u043e <s>\u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430\u043c<\/s> React \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c &#171;MUI&#187;, &#171;AntD&#187; \u0438 \u0442.\u0434. \u043a\u0430\u043a \u0442\u043e \u043d\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0430\u044f \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432\u0435\u0440\u0441\u0442\u043a\u0438!<\/p>\n<p>\u0412 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u0440\u0435\u0448\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435, \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 \u044d\u0442\u043e\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d4c\/26b\/9c9\/d4c26b9c9d262158e63e0337a1a97c28.png\" alt=\"\u042d\u0442\u0430\u043b\u043e\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 (Chrome 113)\" title=\"\u042d\u0442\u0430\u043b\u043e\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 (Chrome 113)\" width=\"1066\" height=\"282\"><\/p>\n<div><figcaption>\u042d\u0442\u0430\u043b\u043e\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 (Chrome 113)<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a&nbsp;\u0440\u0435\u0447\u044c \u043e&nbsp;\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0430&nbsp;\u043d\u0435&nbsp;\u043e&nbsp;\u043d\u0435\u043a\u043e\u043c html \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435, \u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e&nbsp;\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u043e\u0432\u043d\u043e <strong>100% \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b<\/strong> \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<blockquote>\n<p>\u0412 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f\u0445 \u043a\u043e\u0434\u0430 \u043d\u0438\u0436\u0435, \u0447\u0438\u0441\u043b\u043e \u0432 \u043a\u0440\u0443\u0433\u043b\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u043e\u0442\u0441\u044b\u043b\u043a\u0443 \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<\/blockquote>\n<h2>\u042d\u043f\u0438\u0437\u043e\u0434 \u043f\u0435\u0440\u0432\u044b\u0439, \u0440\u0430\u0437\u043c\u0438\u043d\u043e\u0447\u043d\u044b\u0439: HTML<\/h2>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043c\u043e\u0434\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <strong>flex<\/strong> \u0431\u043b\u043e\u043a\u043e\u0432. \u0422\u0430\u043a \u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043c \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0435:<\/p>\n<pre><code class=\"xml\">&lt;div style=\"display: flex; flex-direction: column; height: 100%;\"&gt;   &lt;div style=\"background-color: lightblue;\"&gt;Header&lt;\/div&gt;    &lt;div style=\"display: flex; flex-grow: 1;\"&gt; &lt;div style=\"background-color: bisque; flex-basis: content;\"&gt;Left panel&lt;\/div&gt;  &lt;div style=\"overflow-y: auto; flex-grow: 1;\"&gt;       Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;       Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt; &lt;\/div&gt;  &lt;div style=\"background-color: bisque; flex-basis: content;\"&gt;Right panel&lt;\/div&gt;   &lt;\/div&gt;      &lt;div style=\"background-color: lightblue;\"&gt;Footer&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043a\u043e\u0434\u0443: <\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 <strong>flex<\/strong> \u0431\u043b\u043e\u043a(1), \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 100% \u0432\u044b\u0441\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041a\u043e\u043b\u043e\u043d\u043a\u0443 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <strong>Header<\/strong>(2), \u0431\u043b\u043e\u043a(4) \u0441 \u043d\u0435\u043a\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0438 <strong>Footer<\/strong>(15)<\/p>\n<\/li>\n<li>\n<p><strong>Flex<\/strong> \u0431\u043b\u043e\u043a(4) \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0431\u043b\u043e\u043a\u0435 <strong>(flex\u2011grow: 1) <\/strong>\u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438. \u0412 \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u0445\u043e\u0434\u044f\u0442 \u0441\u043d\u043e\u0432\u0430 \u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430: \u043b\u0435\u0432\u0430\u044f(5) \u0438 \u043f\u0440\u0430\u0432\u0430\u044f(12) \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>Left panel(5) \u0438 Right panel(12) \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c flex-basis: content, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0440\u043e\u0434\u0435 \u0432\u0441\u0435 \u0441\u043a\u043b\u0430\u0434\u043d\u043e \u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u043d\u0430\u0434\u043e? \u041c\u0435\u0447\u0442\u044b, \u0432\u0441\u0435 \u043c\u0435\u0447\u0442\u044b&#8230;<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c44\/854\/c49\/c44854c490705e04a5a0999337da0619.png\" alt=\"\u042d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f!\" title=\"\u042d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f!\" width=\"1099\" height=\"318\"><\/p>\n<div><figcaption>\u042d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f!<\/figcaption><\/div>\n<\/figure>\n<p>\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0442\u0430\u043a?<\/p>\n<p>\u0423 \u0431\u043b\u043e\u043a\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c(7) \u0437\u0430\u0434\u0430\u043d\u043e <strong>overflow-y: auto<\/strong>, \u0447\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0436\u0435 \u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0435\u0449\u0435 \u0440\u0430\u0437 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u2014 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e <strong>overflow-y: auto <\/strong>\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u0443 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n<p>\u042f \u043a\u043e\u0433\u0434\u0430 \u0443\u0432\u0438\u0434\u0435\u043b \u044d\u0442\u043e \u0447\u0443\u0434\u043e, \u0443\u0432\u0435\u0440\u043e\u0432\u0430\u043b \u0432 \u0442\u0435\u043e\u0440\u0438\u044e \u0437\u0430\u0433\u043e\u0432\u043e\u0440\u0430, \u0431\u0443\u0434\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 html \u0440\u0435\u0448\u0438\u043b\u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0432\u043e\u0439\u043d\u0443 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0438 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c. \u0422\u043e\u043b\u044c\u043a\u043e \u0445\u0430\u0440\u0434\u043a\u043e\u0440.<\/p>\n<p>\u0411\u043b\u0430\u0433\u043e, \u043d\u0430 \u0441\u0432\u044f\u0437\u0438 \u0431\u044b\u043b \u043c\u0430\u0442\u0435\u0440\u044b\u0439 &#171;\u0444\u0440\u043e\u043d\u0442\u043e\u0432\u0438\u043a&#187;, \u043e\u043d \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b <s>\u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/s> \u043a\u043e\u0441\u0442\u044b\u043b\u044c:<\/p>\n<pre><code class=\"xml\">&lt;div style=\"display: flex; flex-direction: column; height: 100%;\"&gt;   &lt;div style=\"background-color: lightblue;\"&gt;Header&lt;\/div&gt;    &lt;div style=\"display: flex; flex-grow: 1;\"&gt; &lt;div style=\"background-color: bisque; flex-basis: content;\"&gt;Left panel&lt;\/div&gt;  &lt;div style=\"overflow-y: auto; flex-grow: 1;\"&gt;       &lt;div style=\"height: 0\"&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;       &lt;\/div&gt; &lt;\/div&gt;  &lt;div style=\"background-color: bisque; flex-basis: content;\"&gt;Right panel&lt;\/div&gt;   &lt;\/div&gt;      &lt;div style=\"background-color: lightblue;\"&gt;Footer&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 8 \u0438 11&#8230;<\/p>\n<p>\u0415\u0449\u0435 \u0440\u0430\u0437 \u0441\u043c\u043e\u0442\u0440\u0438\u043c&#8230;<\/p>\n<p>\u041d\u0435\u0442, \u043d\u0435 \u043a\u043e\u0441\u0442\u044b\u043b\u044c. \u041c\u0430\u0433\u0438\u044f! \u0417\u0430\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u043a \u0440\u0430\u0437 \u0441\u043d\u044f\u0442 \u0441 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \ud83d\ude42<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e: \u043d\u0430\u0441 \u0443\u0431\u0435\u0436\u0434\u0430\u044e\u0442, \u0447\u0442\u043e:<\/p>\n<ul>\n<li>\n<p>\u044f\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u0430\u044f \u043d\u0443\u043b\u0435\u0432\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0431\u043b\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u043c;<\/p>\n<\/li>\n<li>\n<p><strong>overflow-y<\/strong> \u043a\u0430\u043a \u0441\u0442\u0430\u0440\u043e\u0435 \u0440\u0443\u0436\u044c\u0435 \u2014 \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u043a\u0443\u0434\u0430 \u043f\u043e\u043f\u0430\u043b\u043e, \u0430 \u0434\u043b\u044f \u0442\u043e\u0447\u043d\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u0443, \u043d\u0443\u0436\u043d\u043e <s>\u043f\u0440\u0438\u043c\u043e\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043a\u043e\u0442\u0447\u0435\u043c<\/s> \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u043e\u0439;<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0432 html \u0436\u0438\u0432\u0443\u0442 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c, \u0434\u0430\u0436\u0435 \u0438 \u043d\u0435 \u0437\u0430\u0438\u043a\u0430\u044e\u0441\u044c: \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u0432\u044b\u0441\u043e\u0442\u0443 100% \u0434\u043b\u044f flex \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430(1) \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u2014 \u043d\u0435\u0442? \u041e\u0442\u043a\u0443\u0434\u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u043e\u0433\u0438 \u0440\u0430\u0441\u0442\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e (\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0432\u044b\u0441\u043e\u0447\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0442.\u0434.), \u043d\u043e \u0442\u0430\u043a \u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043b\u043e\u043c\u0430\u0442\u044c \u0437\u0430\u043a\u043e\u043d\u044b \u043b\u043e\u0433\u0438\u043a\u0438?<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u043e\u043e\u0431\u0449\u0435 \u0442\u0435\u043c\u0430 \u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439, \u0432\u0435\u0441\u044c\u043c\u0430 \u0448\u0438\u0440\u043e\u043a\u0430.<\/summary>\n<div class=\"spoiler__content\">\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 overflow-y <a href=\"https:\/\/play.tailwindcss.com\/Gg3kNw0ISq\" rel=\"noopener noreferrer nofollow\">\u043d\u0435 \u0440\u0435\u0448\u0435\u043d\u0430<\/a> \u0438 \u0432 tailwindcss \u0441 \u0442\u0435\u0433\u043e\u043c overflow-y-auto;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u0430\u0445, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043c\u0435\u043d\u044e \u0438 \u043f\u0440\u043e\u0447\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0438 \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u043a \u043d\u0430\u0447\u0430\u043b\u0443. \u041d\u043e \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u044d\u0442\u043e &#171;\u043c\u043e\u0434\u043d\u043e&#187;, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 &#171;\u0432 \u043d\u0430\u0447\u0430\u043b\u043e&#187;. \u042e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438? \u041d\u0435\u0442, \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0445\u043e\u0442\u044f \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043c #\u0440\u0443\u043a\u0430\u043b\u0438\u0446\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e &#171;\u0434\u0438\u043a\u0438\u0435 \u0442\u0430\u043d\u0446\u044b&#187; \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u0432, \u0436\u0438\u0432\u0443\u0449\u0438\u0445 \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u044c\u044e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0442 \u0441\u0438\u043b \u0443\u0436\u0435&#8230;<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 &#171;\u0448\u0435\u0440\u043e\u0445\u043e\u0432\u0430\u0442\u043e\u0441\u0442\u0435\u0439&#187;, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c (\u0430 \u0432\u044b \u043e \u043d\u0438\u0445 \u0437\u0430\u0431\u0443\u0434\u0435\u0442\u0435, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u043d\u044c), \u043a\u043e\u0434 \u0432\u044b\u0448\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e &#171;\u0440\u044b\u0445\u043b\u043e\u0432\u0430\u0442&#187;, \u043c\u043d\u043e\u0433\u043e \u0431\u0443\u043a\u0432 \u043d\u0430 &#171;\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0439 \u0431\u043b\u043e\u043a&#187;.<\/p>\n<h2>\u042d\u043f\u0438\u0437\u043e\u0434 \u0432\u0442\u043e\u0440\u043e\u0439, \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u044b\u0439: CSS<\/h2>\n<p>\u041d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u0440\u0438\u0434\u0438\u0440\u043a\u0438 \u043a &#171;\u0441\u0442\u0430\u0440\u0438\u0447\u043a\u0443&#187; html? \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u044b\u043d\u0443\u0442\u044c \u043f\u0430\u043b\u043a\u0438 \u0438\u0437 html, \u0441\u043e\u0437\u0434\u0430\u0432 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <strong>layout.css<\/strong>:<\/p>\n<pre><code class=\"css\">html, body {    margin: 0; }  [col], [row] { display: flex; flex-basis: content;  }  [col] { flex-direction: column; height: 100%; }  [row] { flex-direction: row; }  [expand] {   flex-grow: 1; }  [scroll] { overflow-y: auto; background: white; }  [scroll] &gt; * { height: 0; }  [bar] {     background-color: lightblue; }  [panel] {     background-color: bisque; }  [action] { background-color: aqua; }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0430\u0441\u043f\u0435\u043a\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><strong>col<\/strong> &#8212; \u0431\u043b\u043e\u043a \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>row<\/strong> &#8212; \u0431\u043b\u043e\u043a \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>expand<\/strong> &#8212; \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0443 <strong>row<\/strong> \u0438\u043b\u0438 <strong>col<\/strong> \u0434\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>scroll<\/strong> &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u043c\u0430\u0433\u0438\u044e(25), \u0437\u0430\u0434\u0430\u044e\u0449\u0443\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430);<\/p>\n<\/li>\n<li>\n<p><strong>bar, panel, action<\/strong> &#8212; \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0435\u043a\u0438\u0445 \u043f\u0440\u043e\u0447\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0445 \u0431\u043b\u043e\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u0414\u0438\u0430\u043b\u043e\u0433 \u0437\u0430 \u043a\u0430\u0434\u0440\u043e\u043c<\/summary>\n<div class=\"spoiler__content\">\n<p>&#8212; &#171;\u0422\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c. \u0422\u0430\u043a\u0436\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445! \u0410 \u0432\u0434\u0440\u0443\u0433 IE \u0434\u0440\u0435\u043c\u0443\u0447\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f?!&#187;;<\/p>\n<p>&#8212; &#171;\u041d\u0443 \u0434\u0430, 100501-\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443&#8230; \u0410 \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0448\u044c?&#187;;<\/p>\n<p>&#8212; &#171;\u041a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e!&#187;<\/p>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0438\u0448\u0435\u043c \u043d\u043e\u0432\u044b\u0439 html, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0430\u0448 <strong>css<\/strong>:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"stylesheet\" href=\"layout.css\" \/&gt;  &lt;div col&gt;   &lt;div bar&gt;Header&lt;\/div&gt;    &lt;div row expand&gt; &lt;div panel&gt;Left panel&lt;\/div&gt;  &lt;div scroll expand&gt;   &lt;div&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;     &lt;\/div&gt; &lt;\/div&gt;  &lt;div panel&gt;Right panel&lt;\/div&gt;   &lt;\/div&gt;    &lt;div bar&gt;Footer&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0414\u0430, \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 html, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043a\u0430\u043a \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435. \u041a\u043e\u0434 \u043a\u043e\u0440\u043e\u0447\u0435, \u0438 \u0432\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u0443\u0448\u043b\u0430 \u0432 css, \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e \u043d\u0435\u0439 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e (\u043f\u043e\u0447\u0442\u0438).<\/p>\n<p>\u041f\u0440\u043e\u044f\u0441\u043d\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0431\u043b\u043e\u043a(3) \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <strong>col<\/strong>, \u0438\u0431\u043e \u043e\u043d \u043a\u043e\u043b\u043e\u043d\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0431\u043b\u043e\u043a(4) \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c <strong>bar<\/strong> &#8212; \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0431\u043b\u043e\u043a(6) &#8212; \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c <strong>row,<\/strong> \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0438 <strong>expand<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043d\u044f\u043b \u0432\u0441\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u043f\u0430\u043d\u0435\u043b\u044f\u043c\u0438 <strong>Left panel<\/strong> \u0438 <strong>Right panel<\/strong>;<\/p>\n<\/li>\n<li>\n<p>\u0411\u043b\u043e\u043a \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c(9) \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u043a\u0430\u043a <strong>scroll<\/strong> \u0438 \u043e\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 <strong>expand<\/strong>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0442.\u0434&#8230; <\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0438\u0442\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 css, \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0431\u043b\u043e\u043a\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 <strong>scroll<\/strong>. \u041f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0431\u0435\u0434\u0430, \u0434\u0430\u043b\u0435\u0435 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442!<\/p>\n<p>\u0418 \u0445\u043e\u0442\u044f \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0435\u043d\u0430, \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0442\u0430\u043a \u0438 \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u0435\u0442 &#171;\u043d\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c&#187; \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"stylesheet\" href=\"layout.css\" \/&gt;  &lt;div col&gt;   &lt;div bar&gt;Header&lt;\/div&gt;    &lt;div row expand&gt; &lt;div col panel&gt;Left panel&lt;\/div&gt;  &lt;div scroll expand&gt;   &lt;div&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;     &lt;\/div&gt; &lt;\/div&gt;  &lt;div panel col&gt;       &lt;div&gt;         Right panel       &lt;\/div&gt;        &lt;div scroll expand&gt;         &lt;div&gt;           Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;           Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         &lt;\/div&gt;       &lt;\/div&gt;              &lt;div&gt;         Right footer       &lt;\/div&gt; &lt;\/div&gt;   &lt;\/div&gt;      &lt;div bar row&gt;     &lt;div expand&gt;       Footer     &lt;\/div&gt;      &lt;div action&gt;       [Icon]     &lt;\/div&gt;      &lt;div action&gt;       [Action]     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p><strong>Right panel<\/strong>(16) \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <strong>col,<\/strong> \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438(21) \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u043f\u043e \u043e\u0431\u0440\u0430\u0437\u0446\u0443 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 9. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u044d\u0442\u0438 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>Footer<\/strong>(34) \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <strong>row<\/strong>. \u041d\u0430 \u0434\u0435\u0441\u0435\u0440\u0442, \u0432 \u044d\u0442\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435: \u0435\u0441\u043b\u0438 \u043d\u0435\u043a\u0438\u0439 \u0431\u043b\u043e\u043a(35) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <strong>expand<\/strong> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435(39, 43) &#8212; \u0441\u0438\u0440\u043e\u0442\u043b\u0438\u0432\u043e \u0442\u0435\u0441\u043d\u044f\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 (\u0441\u043f\u0440\u0430\u0432\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435). \u041a\u0443\u0434\u0430 \u0435\u0449\u0435 &#171;\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u0435\u0435&#187; ? <\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e\u0442 \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/042\/ec4\/1ef\/042ec41efafdfbd0477ae16d4da1f461.png\" alt=\"\u0423\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\" title=\"\u0423\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\" width=\"1101\" height=\"320\"><\/p>\n<div><figcaption>\u0423\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 &#171;\u0434\u0438\u0437\u0430\u0439\u043d&#187; \u043d\u0443\u0436\u0435\u043d \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u043c. \u0418 \u0432\u043e\u043e\u0431\u0449\u0435, \u0442\u0432\u043e\u0440\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043d\u0435\u0442\u043b\u0435\u043d\u043a\u0443, \u0434\u0435\u043b\u043e \u0443\u0442\u043e\u043d\u0447\u0435\u043d\u043d\u044b\u0445 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432, \u0430 \u043d\u0435 \u0441\u0443\u0440\u043e\u0432\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u0425\u043e\u0442\u044f, \u043c\u0435\u0441\u0442\u0430\u043c\u0438, \u043e\u043d\u0438 \u0436\u0435\u0440\u0442\u0432\u0443\u044e\u0442 \u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438 \u043a\u0430\u043a\u043e\u043c\u0443-\u0442\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0431\u043e\u0436\u0435\u0441\u0442\u0432\u0443. \u041d\u043e, \u0438\u043c\u0435\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c (\u043f\u0440\u0438\u0432\u0435\u0442 \u0431\u043b\u043e\u043a\u0443 \u0441 \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u043e\u0439), \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0435\u0433\u0447\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430.<\/p>\n<h2>\u042d\u043f\u0438\u0437\u043e\u0434 \u0442\u0440\u0435\u0442\u0438\u0439, \u0444\u0435\u0435\u0440\u0438\u0447\u043d\u044b\u0439: MUI \u0438 Ant design<\/h2>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c html + css \u043c\u0430\u043b\u043e \u043a\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0432 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u0432\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0435\u0439\u0448\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/mui.com\/\" rel=\"noopener noreferrer nofollow\">MUI<\/a> \u0438 <a href=\"https:\/\/ant.design\/\" rel=\"noopener noreferrer nofollow\">Ant design<\/a>:<\/p>\n<p>\u0427\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0448\u044c, \u043e\u0431\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\u043c \u0441 &#171;\u0438\u043c\u0435\u043d\u0435\u043c&#187;?<\/p>\n<p>\u041d\u0443 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u0442\u043e \u0443\u043c\u0435\u044e\u0442 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u0421\u0434\u0435\u043b\u0430\u044e\u0442 \u0432\u0441\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0438 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e. \u041f\u0440\u043e\u0434\u0443\u043c\u0430\u044e\u0442 \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b. \u042d\u0442\u043e \u0431\u044b\u043b\u0438 \u043c\u0435\u0447\u0442\u044b. \u0414\u0430\u043b\u0435\u0435 \u0441\u0443\u0440\u043e\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 MUI:<\/p>\n<ul>\n<li>\n<p><strong>Container<\/strong> &#8212; \u043f\u0440\u043e\u0441\u0442\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438. \u042d\u0442\u043e \u0442\u0435\u0433, \u043d\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442. \u0421\u0442\u0440\u0430\u043d\u043d\u043e, \u0447\u0442\u043e \u043d\u0435\u0442 \u0442\u0435\u0433\u043e\u0432 Right \u0438 Left;<\/p>\n<\/li>\n<li>\n<p><strong>Grid<\/strong> &#8212; \u043f\u043e\u0445\u043e\u0436\u0435 \u043c\u0438\u043c\u043e. \u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>Stack<\/strong> &#8212; \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439\\\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u044d\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0431\u043b\u0438\u0437\u043a\u043e\u0435 \u043a \u0437\u0430\u0434\u0430\u0447\u0435. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Stack \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u0441\u0442\u043e\u043b\u0431\u0438\u043a \u0438\u043b\u0438 \u043b\u0438\u043d\u0438\u044e. \u0412\u0441\u0435. \u0412\u043d\u0435\u0437\u0430\u043f\u043d\u043e. \u0417\u0430\u043d\u0430\u0432\u0435\u0441.<\/p>\n<\/li>\n<\/ul>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 AntD:<\/p>\n<ul>\n<li>\n<p><strong>Space<\/strong> &#8212; \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b \u0430\u043d\u0430\u043b\u043e\u0433 <strong>Container<\/strong> \u0438\u0437 MUI;<\/p>\n<\/li>\n<li>\n<p><strong>Layout<\/strong> &#8212; \u0433\u043b\u044f\u0434\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e 100% \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435. \u041a\u0430\u0436\u0435\u0442\u0441\u044f. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043d\u0435 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d, \u0442.\u0435. \u0431\u0435\u0437 \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f css \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0446\u0435\u043b\u0435\u0432\u043e\u0439, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f;<\/p>\n<\/li>\n<li>\n<p><strong>Grid<\/strong> &#8212; \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 (\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e) \u0430\u043d\u0430\u043b\u043e\u0433\u0430 <strong>Grid<\/strong> \u0432 MUI, \u0442\u043e\u0436\u0435 \u043c\u0438\u043c\u043e;<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u0446\u0435\u043b\u0435\u0432\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f css \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f!<\/p>\n<p>\u0413\u0434\u0435 \u0430\u043d\u0430\u043b\u043e\u0433 expand \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 flex-grow \u0438\u043b\u0438 \u0432\u0440\u043e\u0434\u0435 \u0442\u043e\u0433\u043e?<\/p>\n<p>\u0418\\\u0438\u043b\u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u043b\u0435\u0432\u043e-\u0446\u0435\u043d\u0442\u0440-\u043f\u0440\u0430\u0432\u043e?<\/p>\n<p>\u0414\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u043b \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0438\u0430\u0441\u043a\u043e.<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e: <\/p>\n<blockquote>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0441\u043b\u043e\u0436\u043d\u0435\u0435 &#171;\u043f\u0440\u043e\u043b\u0430\u0439\u043a\u0430\u0442\u044c \u043a\u043e\u0442\u0438\u043a\u043e\u0432&#187; \u043d\u0430\u043c \u043d\u0435 \u0434\u0430\u044e\u0442, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043b\u0430\u0437\u0435\u0439\u043a\u0443 \u0432 \u0432\u0438\u0434\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0433\u043e html + css. <\/p>\n<p>\u0413\u0434\u0435-\u0442\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u0431\u044b\u043b\u043e? \u041c\u043e\u0436\u0435\u0442 \u0432 html + css? <\/p>\n<p>\u0410 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438? \u0410\u0445, \u0434\u0430 \u2014 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430&#8230;<\/p>\n<p>#\u0441\u043e\u0432\u0441\u0435\u043c-\u0440\u0443\u043a\u0430-\u043b\u0438\u0446\u043e<\/p>\n<\/blockquote>\n<p>\u042f \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0443 \u0437\u0430\u0431\u043b\u0443\u0436\u0434\u0430\u0442\u044c\u0441\u044f, \u0432 \u043d\u0430\u0434\u0435\u0436\u0434\u0435, \u0447\u0442\u043e \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u043e\u0435 \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0442\u043a\u043d\u0435\u0442 \u043c\u0435\u043d\u044f, \u043a\u0430\u043a \u0441\u043b\u0435\u043f\u043e\u0433\u043e \u043a\u043e\u0442\u0435\u043d\u043a\u0430, \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0441\u043e\u0441\u0442\u0430\u0432\u0430 MUI \u0438\u043b\u0438 Ant Design.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0432\u0435\u0449\u044c &#8212; \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439. \u0418 \u0434\u0435\u043b\u043e \u043d\u0435 \u0432 \u043e\u0441\u043e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 flex \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e css \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0444\u0438\u0447, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0435\u0441\u044c\u043c\u0430 \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u0435\u043b\u043e\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0439 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 html+css \u0441\u0447\u0438\u0442\u0430\u044e \u0437\u0430\u043b\u043e\u0433\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 React \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0422\u0430\u043a\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0435\u043d\u044f \u0433\u0430\u0434\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0438\u0437 \u0444\u0438\u0447 css \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0443\u044e\u0442 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0431\u043e\u0440\u0430 &#171;\u0440\u044b\u0447\u0430\u0433\u043e\u0432&#187; \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445.<\/p>\n<h2>\u042d\u043f\u0438\u0437\u043e\u0434 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439: Box, just Box<\/h2>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 UI \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <a href=\"https:\/\/geekload.io\/\" rel=\"noopener noreferrer nofollow\">GeekLoad<\/a>, \u0441\u0440\u0430\u0437\u0443 \u0431\u044b\u043b\u0430 \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043c\u0435\u043d\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0432\u0434\u0440\u0443\u0433 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442). \u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0435\u0433\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0441\u0430\u043c\u044b\u0435 \u0447\u0430\u0441\u0442\u044b\u0435 \u0432 UI, \u0442\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u043a\u0438 \u0432\u0441\u0435\u0433\u043e \u0438 \u0432\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435.<\/p>\n<p>\u042d\u0442\u043e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0432 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u043f\u043e\u0431\u0443\u0434\u0438\u043b\u0438 \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0433\u043e &#171;\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430&#187; &#8212; React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 &lt;<strong>Box<\/strong>\/&gt;. <\/p>\n<blockquote>\n<p>\u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0431\u044b\u043b\u043e: \u043d\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0430\u043b\u043a\u0438 \u0432 <s>\u043a\u043e\u043b\u0435\u0441\u0430<\/s> \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f &#171;\u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c&#8230;&#187; \u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u0435\u0439\u0441\u044b \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 &#8212; \u0430\u043d\u0430\u043b\u043e\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 MUI:Container:<\/p>\n<pre><code class=\"typescript\">&lt;Box class='bar'&gt;Content&lt;\/Box&gt;<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b94\/264\/23e\/b9426423ebf34dad81b41c46c7356472.png\" alt=\"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0437\u0434\u0435\u0441\u044c - \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0431\u043b\u043e\u043a\u043e\u0432, \u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e!\" title=\"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0437\u0434\u0435\u0441\u044c - \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0431\u043b\u043e\u043a\u043e\u0432, \u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e!\" width=\"1000\" height=\"281\"><\/p>\n<div><figcaption>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0437\u0434\u0435\u0441\u044c &#8212; \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0431\u043b\u043e\u043a\u043e\u0432, \u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e!<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <strong>expand<\/strong> &#8212; \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c \u0432\u0441\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430:<\/p>\n<pre><code class=\"xml\">&lt;Box expand class='bar'&gt;Content&lt;\/Box&gt;<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2bc\/ecb\/56f\/2bcecb56fb8e9a753a05dc493dc32175.png\" alt=\"\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\" title=\"\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\" width=\"1000\" height=\"251\"><\/p>\n<div><figcaption>\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 AntD:Space, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 hAlign \u0438 vAlign, \u043d\u0435 \u0434\u0443\u043c\u0430\u044f \u043e \u0442\u043e\u043c \u043a\u0430\u043a\u0430\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430: \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043b\u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e &#8212; \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f, \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435):<\/p>\n<pre><code class=\"xml\">&lt;Box hAlign = {Align.End}      vAlign = {Align.End}      class = 'bar' &gt;Content&lt;\/Box&gt;<\/code><\/pre>\n<blockquote>\n<p>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u043e\u0442 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432\u0430\u0436\u043d\u0430 \u0435\u0449\u0435 \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0438\u043b\u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u043c view.<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f9b\/1bf\/381\/f9b1bf381d6c7e49939513894a80acd5.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0414\u0430, \u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e.\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0414\u0430, \u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e.\" width=\"1000\" height=\"251\"><\/p>\n<div><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0414\u0430, \u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e.<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u0440\u0430\u0442\u043a\u043e \u043f\u043e\u044f\u0441\u043d\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>Box<\/strong>:<\/p>\n<ul>\n<li>\n<p>A\u0442\u0440\u0438\u0431\u0443\u0442 <strong>col <\/strong>\u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 \u0441\u0430\u043c \u0431\u043b\u043e\u043a \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u043d\u0435\u0442, \u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u0441\u0430\u043c \u0431\u043b\u043e\u043a \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>Body<\/strong> html \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 &#171;\u0437\u0430 \u043a\u0430\u0434\u0440\u043e\u043c&#187; \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a &lt;<strong>Box col<\/strong>&gt; \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442\u044b\u0439 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <strong>expand<\/strong> \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 <strong>Box<\/strong> \u043f\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e, \u043e\u043d\u0438 \u0434\u0435\u043b\u044f\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043f\u043e\u0440\u043e\u0432\u043d\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <strong>scroll<\/strong> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 <strong>col<\/strong> \u0431\u043b\u043e\u043a\u0443 \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <strong>gap <\/strong>\u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043c\u0435\u0436\u0434\u0443 \u0431\u043b\u043e\u043a\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u0432 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445 &#8216;rem&#8217;. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e = 1;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441\u043b\u0443\u0436\u0430\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b hAlign \u0438 vAlign:<\/p>\n<ul>\n<li>\n<p><strong>Align.Start<\/strong> &#8212; \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u043c\u0443 \u0438\u043b\u0438 \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>Align.Center<\/strong> (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) &#8212; \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443;<\/p>\n<\/li>\n<li>\n<p><strong>Align.End<\/strong> &#8212; \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u043d\u0438\u0436\u043d\u0435\u043c\u0443 \u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e;<\/p>\n<\/li>\n<li>\n<p><strong>Align.Fill<\/strong> &#8212; \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u043e\u0432 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0442 Box \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0431\u043b\u043e\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <strong>class<\/strong> &#8212; \u0437\u0430\u0434\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 css \u043a\u043b\u0430\u0441\u0441\u044b \u0431\u043b\u043e\u043a\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u0437\u0430\u0442\u0435\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c &#171;\u0446\u0435\u043b\u0435\u0432\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443&#187;:<\/p>\n<pre><code class=\"xml\">&lt;Box expand&gt;   &lt;Box col expand&gt;     &lt;Box class = 'bar'&gt;Header&lt;\/Box&gt;      &lt;Box expand&gt;       &lt;Box col class = 'panel'&gt;Left panel&lt;\/Box&gt;        &lt;Box scroll expand&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;       &lt;\/Box&gt;        &lt;Box col class = 'panel'&gt;Right panel&lt;\/Box&gt;     &lt;\/Box&gt;      &lt;Box class = 'bar'&gt;Footer&lt;\/Box&gt;   &lt;\/Box&gt; &lt;\/Box&gt;<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 <strong>Box<\/strong>(1) \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438. \u042d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445.<\/p>\n<\/li>\n<li>\n<p><strong>Box<\/strong>(2) <strong>col<\/strong>, \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0431\u043b\u043e\u043a\u0438 Header(3), Content(5) \u0438 Footer(13) \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e, \u0430 <strong>expand<\/strong> \u0437\u0430\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043f\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0442.\u0435. \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>Box<\/strong>(3) &#8212; \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a &#171;Header&#187;;<\/p>\n<\/li>\n<li>\n<p><strong>Box<\/strong>(5), \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0431\u043b\u043e\u043a\u0438 Left panel(6), Content(8) \u0438 Right panel(13) \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e<\/p>\n<\/li>\n<li>\n<p>Left panel(6) \u0438 Right panel(13) \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <strong>col<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0442\u044c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0442\u044f\u043d\u0443\u0442\u044b\u043c\u0438;<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5a6\/418\/16b\/5a641816bf261e98dc2c8a87dac6f8a6.png\" alt=\"\u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 - \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.\" title=\"\u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 - \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.\" width=\"1100\" height=\"415\"><\/p>\n<div><figcaption>\u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 &#8212; \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.<\/figcaption><\/div>\n<\/figure>\n<p>\u0418, \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a, \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0443:<\/p>\n<pre><code class=\"xml\">&lt;Box expand&gt;   &lt;Box col expand&gt;     &lt;Box gap = {2} class = 'bar'&gt;       &lt;Box&gt;Header&lt;\/Box&gt;       &lt;Box expand = {2} class = 'action'&gt;[Menu]&lt;\/Box&gt;       &lt;Box expand class = 'action'&gt;[Login]&lt;\/Box&gt;     &lt;\/Box&gt;      &lt;Box expand&gt;       &lt;Box col class = 'panel'&gt;Left panel&lt;\/Box&gt;        &lt;Box scroll expand&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;       &lt;\/Box&gt;        &lt;Box col&gt;           &lt;Box class = 'panel'&gt;Right header&lt;\/Box&gt;            &lt;Box scroll expand&gt;             Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;             Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;           &lt;\/Box&gt;            &lt;Box class = 'panel'&gt;Right footer&lt;\/Box&gt;       &lt;\/Box&gt;     &lt;\/Box&gt;      &lt;Box gap class = 'bar'&gt;         &lt;Box expand class = 'bar'&gt;Footer&lt;\/Box&gt;          &lt;Box class = 'action'&gt;[Icon]&lt;\/Box&gt;         &lt;Box class = 'action'&gt;[Action]&lt;\/Box&gt;     &lt;\/Box&gt;   &lt;\/Box&gt; &lt;\/Box&gt;<\/code><\/pre>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0443\u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u0435\u043d. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043e\u0441\u043e\u0431\u043e &#8212; \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 &#8212; \u043f\u043e\u043f\u0440\u0430\u0432\u043b\u044e \u0441\u0442\u0430\u0442\u044c\u044e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c13\/c11\/1e7\/c13c111e75d1b18686440cea57528b15.png\" alt=\"\u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0437\u0430 \u0442\u0430\u043a\u043e\u0435 \u0443\u0431\u044c\u044e\u0442. \u041d\u043e \u043c\u044b \u0438\u043c \u043d\u0435 \u043f\u043e\u043a\u0430\u0436\u0435\u043c ;)\" title=\"\u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0437\u0430 \u0442\u0430\u043a\u043e\u0435 \u0443\u0431\u044c\u044e\u0442. \u041d\u043e \u043c\u044b \u0438\u043c \u043d\u0435 \u043f\u043e\u043a\u0430\u0436\u0435\u043c ;)\" width=\"1101\" height=\"333\"><\/p>\n<div><figcaption>\u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0437\u0430 \u0442\u0430\u043a\u043e\u0435 \u0443\u0431\u044c\u044e\u0442. \u041d\u043e \u043c\u044b \u0438\u043c \u043d\u0435 \u043f\u043e\u043a\u0430\u0436\u0435\u043c \ud83d\ude09<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0438\u0436\u0435, \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c, \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0441\u043f\u043e\u0440\u043d\u044b\u043c\u0438, \u043d\u043e, \u0443\u0432\u0435\u0440\u0435\u043d, \u043a\u043e\u043c\u0443 \u0442\u043e \u0438\u0434\u0435\u044f \u0437\u0430\u0439\u0434\u0435\u0442, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 &lt;Box\/&gt;<\/summary>\n<div class=\"spoiler__content\">\n<p>Box.css:<\/p>\n<pre><code class=\"css\">#root, html, body {     margin: 0;     width: 100%;     height: 100%;     overflow: hidden; }  #root {     display: flex;     flex-direction: column;     align-items: center; }  .box {     flex-basis: content;     display: flex; }  .row {     flex-direction: row;     width: 100%; }  .col {     flex-direction: column;     height: 100%; }  .scroll {     overflow-y: auto;     overflow-x: hidden;     width: 100%;     height: 100%; }  .bar {     background-color: lightblue; }  .panel {     background-color: bisque; }  .action {     background-color: aqua; }<\/code><\/pre>\n<p>Box.tsx:<\/p>\n<pre><code class=\"typescript\">import {ReactNode} from 'react'; import '.\/Box.css'  export enum Align {     Start = 'start',     End = 'end',     Center = 'center',     Fill = 'stretch' }  export default (props: {     class?: string     scroll?: boolean     hAlign?: Align     vAlign?: Align     col?: boolean     expand?: boolean | number     children?: ReactNode     gap?: boolean | number }) =&gt; {     const hAlign = props.scroll ? Align.Fill : props.hAlign || Align.Center     const vAlign = props.scroll ? Align.Fill : props.vAlign || Align.Center     const gap = (props.gap || false) ? (((typeof props.gap) == 'boolean' ? 1 : props.gap) + 'rem') : undefined     const expand = Number((props.expand || false) ? (((typeof props.expand) == 'boolean' ? 1 : props.expand)) : undefined)      return &lt;div className = {         ('box ' +             (props.col ? 'col ' : 'row ') +             (props.scroll ? 'scroll ' : '') +             (props.class ? props.class : '')         ).trim()     }                 style = {{                     flexGrow: expand,                     justifyContent: props.col ? vAlign : hAlign,                     alignItems: props.col ? hAlign : vAlign,                      rowGap: props.col ? gap : undefined,                     columnGap: props.col ? undefined : gap                 }}     &gt;         {props.scroll             ? &lt;div style = {{height: 0}}&gt;{props.children}&lt;\/div&gt;             : props.children}     &lt;\/div&gt; }  export function AppScreen(props: { children: ReactNode }) {     return &lt;div style = {{height: '100%'}}&gt;{props.children}&lt;\/div&gt; }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h2>&#8212; &#171;\u0410 \u0432 \u0447\u0435\u043c \u0431\u044b\u043b\u0430 \u0441\u0443\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435?&#187;<\/h2>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0439 \u0432 html + css \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0435\u0449\u0435 \u043f\u043e\u0440\u044f\u0434\u043e\u0447\u043d\u043e, \u043d\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0432\u0437\u044f\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u0442\u043e \u043a\u0435\u0439\u0441 \u0438 \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0435\u0433\u043e \u0434\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u043c.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0441\u0447\u0438\u0442\u0430\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u043e\u0436\u0438\u0434\u0430\u044e \u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 &#8212; \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b. \u0418 \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 <strong>Box<\/strong> \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0435\u0442 &#171;\u0434\u0440\u0443\u0436\u0438\u0442\u044c&#187; \u0441 \u043a\u0430\u043a\u0438\u043c \u0442\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043e\u043d \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0438 \u043d\u043e\u0432\u044b\u0435 \u043a\u0435\u0439\u0441\u044b \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0438\u0441\u044c.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0438 \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438: \u0415\u0441\u043b\u0438 \u0432 \u043d\u0435\u043a\u043e\u0439 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u044b \u043d\u0435 \u0447\u0430\u0441\u0442\u044b\u0439 \u0433\u043e\u0441\u0442\u044c, \u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0441\u043e\u043b\u0438\u0434\u0430\u0446\u0438\u044f &#171;\u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438&amp;\u043c\u0430\u0433\u0438\u0438&#187; \u0432 \u043d\u0435\u043a\u0438\u0445 \u0442\u043e\u0447\u043a\u0430\u0445. <strong>Box<\/strong> &#8212; \u043a\u0430\u043a \u0440\u0430\u0437 \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043a\u043e\u0434\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0432\u0435\u0437\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0438\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0431\u0443\u0434\u0435\u0442\u0435 \u0441\u0443\u0442\u044c \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0444\u0430\u0441\u0430\u0434 \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0438\u0445, \u0438\u0437\u0431\u0430\u0432\u0438\u0442 \u0432\u0430\u0441 \u043e\u0442 \u043c\u0443\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043f\u044b\u0442\u043e\u043a &#171;\u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0432\u0441\u0435&#187;.<\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u0436\u0430\u043b\u044c, \u0447\u0442\u043e \u043c\u044d\u0442\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043c\u043d\u043e\u0436\u0430\u0442 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0442\u0430\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0435 \u043a\u0435\u0439\u0441\u044b.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <\/p>\n<div class=\"tm-article-poll-container\">\n<div class=\"tm-article-poll tm-article-poll_variant-bordered\">\n<div class=\"tm-notice tm-article-poll__notice tm-notice_positive\"><!----> <\/p>\n<div class=\"tm-notice__inner\"><!----> <\/p>\n<div class=\"tm-notice__content\"><span>\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a rel=\"nofollow\" href=\"\/kek\/v1\/auth\/habrahabr\/?back=\/ru\/articles\/730342\/&#038;hl=ru\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__header\">\u0421\u0442\u043e\u0438\u0442 \u043b\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0446\u0438\u043a\u043b \u0441\u0442\u0430\u0442\u0435\u0439 \u0432 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c \u043a\u043b\u044e\u0447\u0435, \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u0442\u0435\u043c\u0430\u043c?<\/div>\n<div class=\"tm-article-poll__answers\">\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">             33.33%           <\/span> <span class=\"tm-article-poll__answer-label\">\u0414\u0430<\/span> <span class=\"tm-article-poll__answer-votes\">             2           <\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width:33.33%;\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">             33.33%           <\/span> <span class=\"tm-article-poll__answer-label\">\u041d\u0435\u0442<\/span> <span class=\"tm-article-poll__answer-votes\">             2           <\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width:33.33%;\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent tm-article-poll__answer-percent_winning\">             33.33%           <\/span> <span class=\"tm-article-poll__answer-label\">\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0443\u0447\u0438\u0441\u044c<\/span> <span class=\"tm-article-poll__answer-votes\">             2           <\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress tm-article-poll__answer-progress_winning\" style=\"width:33.33%;\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__stats\">        \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 6 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.          \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u043b\u0438\u0441\u044c 5 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.      <\/div>\n<\/div>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/730342\/\"> https:\/\/habr.com\/ru\/articles\/730342\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<blockquote>\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/articles\/730132\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e\u0431 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u043a\u043e\u0434\u0430, \u043d\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u0432\u0435\u0441\u0435\u043b\u044c\u0435 \u043f\u043e\u0434\u0436\u0438\u0434\u0430\u0435\u0442 \u043d\u0430\u0441 \u0438 \u0432 \u0432\u0435\u0431 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0427\u0438\u0442\u0430\u0435\u043c, \u0443\u043b\u044b\u0431\u0430\u0435\u043c\u0441\u044f \u0438 \u0431\u0435\u0440\u0435\u043c \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443.<\/p>\n<\/blockquote>\n<p>\u041a\u0430\u043a \u0442\u043e \u0442\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u043a &#171;\u0444\u0440\u043e\u043d\u0442\u043e\u0432\u043e\u0439&#187; \u0442\u0435\u043c\u0435, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u044b\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u0431\u0440\u0443\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e windows-\u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430. \u041d\u043e, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0438\u0437\u0440\u0435\u0434\u043a\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e html\/css\/React, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0443\u0434\u0438\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438\u0437\u0432\u0438\u043b\u0438\u0441\u0442\u044b\u043c \u043f\u0443\u0442\u044f\u043c, \u0432\u0435\u0434\u0443\u0449\u0438\u043c \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>Html\/css \u0438 \u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u043c\u043e\u0433\u0443\u0447\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0434\u043b\u044f \u0432\u043e\u043f\u043b\u043e\u0449\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u044b\u0445 \u0441\u043c\u0435\u043b\u044b\u0445 \u0444\u0430\u043d\u0442\u0430\u0437\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432. \u0418, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043f\u0440\u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u043c \u0438 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0432 \u0442\u0435\u043c\u0443 \u0432\u0435\u0440\u0441\u0442\u043a\u0438, \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 &#171;\u043f\u0440\u043e\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u043f\u043e\u0434\u043a\u043e\u0440\u043a\u0435&#187; \u0438 &#171;\u0432\u0435\u0440\u0442\u0438\u0442\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u0447\u0438\u043a\u0430\u0445 \u043f\u0430\u043b\u044c\u0446\u0435\u0432&#187;&#8230;<\/p>\n<p>\u0410 \u043a\u0430\u043a \u0431\u044b\u0442\u044c \u0442\u0435\u043c, \u043a\u0442\u043e \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u0432 \u0441\u0438\u044f\u044e\u0449\u0438\u0439 \u043c\u0438\u0440 CSS \u043b\u0438\u0448\u044c \u0438\u0437\u0440\u0435\u0434\u043a\u0430 \u2014 \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438?<\/p>\n<p>\u041b\u0438\u0431\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e \u043e\u0431\u044a\u0435\u043c\u0443 \u0440\u0430\u0431\u043e\u0442 \u0438 \u0443\u0441\u0438\u043b\u0438\u044f \u043f\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043e\u043a\u0443\u043f\u044f\u0442\u0441\u044f?<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0434\u0430\u0436\u0435 \u043d\u0430 \u0432\u043e\u0441\u044c\u043c\u0438\u0434\u0435\u0441\u044f\u0442\u043e\u043c \u044d\u0442\u0430\u0436\u0435 \u043d\u0430\u0441\u043b\u043e\u0435\u043d\u0438\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c React, \u0431\u043b\u0443\u0436\u0434\u0430\u044f \u043f\u043e <s>\u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430\u043c<\/s> React \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c &#171;MUI&#187;, &#171;AntD&#187; \u0438 \u0442.\u0434. \u043a\u0430\u043a \u0442\u043e \u043d\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0430\u044f \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432\u0435\u0440\u0441\u0442\u043a\u0438!<\/p>\n<p>\u0412 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u0440\u0435\u0448\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435, \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 \u044d\u0442\u043e\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u042d\u0442\u0430\u043b\u043e\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 (Chrome 113)<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a&nbsp;\u0440\u0435\u0447\u044c \u043e&nbsp;\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0430&nbsp;\u043d\u0435&nbsp;\u043e&nbsp;\u043d\u0435\u043a\u043e\u043c html \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435, \u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e&nbsp;\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u043e\u0432\u043d\u043e <strong>100% \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b<\/strong> \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<blockquote>\n<p>\u0412 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f\u0445 \u043a\u043e\u0434\u0430 \u043d\u0438\u0436\u0435, \u0447\u0438\u0441\u043b\u043e \u0432 \u043a\u0440\u0443\u0433\u043b\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u043e\u0442\u0441\u044b\u043b\u043a\u0443 \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<\/blockquote>\n<h2>\u042d\u043f\u0438\u0437\u043e\u0434 \u043f\u0435\u0440\u0432\u044b\u0439, \u0440\u0430\u0437\u043c\u0438\u043d\u043e\u0447\u043d\u044b\u0439: HTML<\/h2>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u043c\u043e\u0434\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <strong>flex<\/strong> \u0431\u043b\u043e\u043a\u043e\u0432. \u0422\u0430\u043a \u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043c \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0435:<\/p>\n<pre><code class=\"xml\">&lt;div style=\"display: flex; flex-direction: column; height: 100%;\"&gt;   &lt;div style=\"background-color: lightblue;\"&gt;Header&lt;\/div&gt;    &lt;div style=\"display: flex; flex-grow: 1;\"&gt; &lt;div style=\"background-color: bisque; flex-basis: content;\"&gt;Left panel&lt;\/div&gt;  &lt;div style=\"overflow-y: auto; flex-grow: 1;\"&gt;       Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;       Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt; &lt;\/div&gt;  &lt;div style=\"background-color: bisque; flex-basis: content;\"&gt;Right panel&lt;\/div&gt;   &lt;\/div&gt;      &lt;div style=\"background-color: lightblue;\"&gt;Footer&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043a\u043e\u0434\u0443: <\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 <strong>flex<\/strong> \u0431\u043b\u043e\u043a(1), \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 100% \u0432\u044b\u0441\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041a\u043e\u043b\u043e\u043d\u043a\u0443 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <strong>Header<\/strong>(2), \u0431\u043b\u043e\u043a(4) \u0441 \u043d\u0435\u043a\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0438 <strong>Footer<\/strong>(15)<\/p>\n<\/li>\n<li>\n<p><strong>Flex<\/strong> \u0431\u043b\u043e\u043a(4) \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0431\u043b\u043e\u043a\u0435 <strong>(flex\u2011grow: 1) <\/strong>\u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438. \u0412 \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u0445\u043e\u0434\u044f\u0442 \u0441\u043d\u043e\u0432\u0430 \u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430: \u043b\u0435\u0432\u0430\u044f(5) \u0438 \u043f\u0440\u0430\u0432\u0430\u044f(12) \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>Left panel(5) \u0438 Right panel(12) \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c flex-basis: content, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0440\u043e\u0434\u0435 \u0432\u0441\u0435 \u0441\u043a\u043b\u0430\u0434\u043d\u043e \u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u043d\u0430\u0434\u043e? \u041c\u0435\u0447\u0442\u044b, \u0432\u0441\u0435 \u043c\u0435\u0447\u0442\u044b&#8230;<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u042d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f!<\/figcaption><\/div>\n<\/figure>\n<p>\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0442\u0430\u043a?<\/p>\n<p>\u0423 \u0431\u043b\u043e\u043a\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c(7) \u0437\u0430\u0434\u0430\u043d\u043e <strong>overflow-y: auto<\/strong>, \u0447\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0436\u0435 \u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0435\u0449\u0435 \u0440\u0430\u0437 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u2014 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e <strong>overflow-y: auto <\/strong>\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u0443 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n<p>\u042f \u043a\u043e\u0433\u0434\u0430 \u0443\u0432\u0438\u0434\u0435\u043b \u044d\u0442\u043e \u0447\u0443\u0434\u043e, \u0443\u0432\u0435\u0440\u043e\u0432\u0430\u043b \u0432 \u0442\u0435\u043e\u0440\u0438\u044e \u0437\u0430\u0433\u043e\u0432\u043e\u0440\u0430, \u0431\u0443\u0434\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 html \u0440\u0435\u0448\u0438\u043b\u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0432\u043e\u0439\u043d\u0443 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u0438 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c. \u0422\u043e\u043b\u044c\u043a\u043e \u0445\u0430\u0440\u0434\u043a\u043e\u0440.<\/p>\n<p>\u0411\u043b\u0430\u0433\u043e, \u043d\u0430 \u0441\u0432\u044f\u0437\u0438 \u0431\u044b\u043b \u043c\u0430\u0442\u0435\u0440\u044b\u0439 &#171;\u0444\u0440\u043e\u043d\u0442\u043e\u0432\u0438\u043a&#187;, \u043e\u043d \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b <s>\u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/s> \u043a\u043e\u0441\u0442\u044b\u043b\u044c:<\/p>\n<pre><code class=\"xml\">&lt;div style=\"display: flex; flex-direction: column; height: 100%;\"&gt;   &lt;div style=\"background-color: lightblue;\"&gt;Header&lt;\/div&gt;    &lt;div style=\"display: flex; flex-grow: 1;\"&gt; &lt;div style=\"background-color: bisque; flex-basis: content;\"&gt;Left panel&lt;\/div&gt;  &lt;div style=\"overflow-y: auto; flex-grow: 1;\"&gt;       &lt;div style=\"height: 0\"&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;       &lt;\/div&gt; &lt;\/div&gt;  &lt;div style=\"background-color: bisque; flex-basis: content;\"&gt;Right panel&lt;\/div&gt;   &lt;\/div&gt;      &lt;div style=\"background-color: lightblue;\"&gt;Footer&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 8 \u0438 11&#8230;<\/p>\n<p>\u0415\u0449\u0435 \u0440\u0430\u0437 \u0441\u043c\u043e\u0442\u0440\u0438\u043c&#8230;<\/p>\n<p>\u041d\u0435\u0442, \u043d\u0435 \u043a\u043e\u0441\u0442\u044b\u043b\u044c. \u041c\u0430\u0433\u0438\u044f! \u0417\u0430\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u043a \u0440\u0430\u0437 \u0441\u043d\u044f\u0442 \u0441 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \ud83d\ude42<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e: \u043d\u0430\u0441 \u0443\u0431\u0435\u0436\u0434\u0430\u044e\u0442, \u0447\u0442\u043e:<\/p>\n<ul>\n<li>\n<p>\u044f\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u0430\u044f \u043d\u0443\u043b\u0435\u0432\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0431\u043b\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u043c;<\/p>\n<\/li>\n<li>\n<p><strong>overflow-y<\/strong> \u043a\u0430\u043a \u0441\u0442\u0430\u0440\u043e\u0435 \u0440\u0443\u0436\u044c\u0435 \u2014 \u0441\u0442\u0440\u0435\u043b\u044f\u0435\u0442 \u043a\u0443\u0434\u0430 \u043f\u043e\u043f\u0430\u043b\u043e, \u0430 \u0434\u043b\u044f \u0442\u043e\u0447\u043d\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u0443, \u043d\u0443\u0436\u043d\u043e <s>\u043f\u0440\u0438\u043c\u043e\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043a\u043e\u0442\u0447\u0435\u043c<\/s> \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u043b\u043e\u043a\u043e\u043c \u0441 \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u043e\u0439;<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0432 html \u0436\u0438\u0432\u0443\u0442 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c, \u0434\u0430\u0436\u0435 \u0438 \u043d\u0435 \u0437\u0430\u0438\u043a\u0430\u044e\u0441\u044c: \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u0432\u044b\u0441\u043e\u0442\u0443 100% \u0434\u043b\u044f flex \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430(1) \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u2014 \u043d\u0435\u0442? \u041e\u0442\u043a\u0443\u0434\u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u043e\u0433\u0438 \u0440\u0430\u0441\u0442\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e (\u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0432\u044b\u0441\u043e\u0447\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0442.\u0434.), \u043d\u043e \u0442\u0430\u043a \u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043b\u043e\u043c\u0430\u0442\u044c \u0437\u0430\u043a\u043e\u043d\u044b \u043b\u043e\u0433\u0438\u043a\u0438?<\/p>\n<details class=\"spoiler\">\n<summary>\u0412\u043e\u043e\u0431\u0449\u0435 \u0442\u0435\u043c\u0430 \u0441 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u043e\u0439, \u0432\u0435\u0441\u044c\u043c\u0430 \u0448\u0438\u0440\u043e\u043a\u0430.<\/summary>\n<div class=\"spoiler__content\">\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 overflow-y <a href=\"https:\/\/play.tailwindcss.com\/Gg3kNw0ISq\" rel=\"noopener noreferrer nofollow\">\u043d\u0435 \u0440\u0435\u0448\u0435\u043d\u0430<\/a> \u0438 \u0432 tailwindcss \u0441 \u0442\u0435\u0433\u043e\u043c overflow-y-auto;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u0430\u0445, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043c\u0435\u043d\u044e \u0438 \u043f\u0440\u043e\u0447\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u043e\u043c, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0438 \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u043a \u043d\u0430\u0447\u0430\u043b\u0443. \u041d\u043e \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u044d\u0442\u043e &#171;\u043c\u043e\u0434\u043d\u043e&#187;, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 &#171;\u0432 \u043d\u0430\u0447\u0430\u043b\u043e&#187;. \u042e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438? \u041d\u0435\u0442, \u043d\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0445\u043e\u0442\u044f \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043c #\u0440\u0443\u043a\u0430\u043b\u0438\u0446\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e &#171;\u0434\u0438\u043a\u0438\u0435 \u0442\u0430\u043d\u0446\u044b&#187; \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u0432, \u0436\u0438\u0432\u0443\u0449\u0438\u0445 \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u044c\u044e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0442 \u0441\u0438\u043b \u0443\u0436\u0435&#8230;<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 &#171;\u0448\u0435\u0440\u043e\u0445\u043e\u0432\u0430\u0442\u043e\u0441\u0442\u0435\u0439&#187;, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c (\u0430 \u0432\u044b \u043e \u043d\u0438\u0445 \u0437\u0430\u0431\u0443\u0434\u0435\u0442\u0435, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u043d\u044c), \u043a\u043e\u0434 \u0432\u044b\u0448\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e &#171;\u0440\u044b\u0445\u043b\u043e\u0432\u0430\u0442&#187;, \u043c\u043d\u043e\u0433\u043e \u0431\u0443\u043a\u0432 \u043d\u0430 &#171;\u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0439 \u0431\u043b\u043e\u043a&#187;.<\/p>\n<h2>\u042d\u043f\u0438\u0437\u043e\u0434 \u0432\u0442\u043e\u0440\u043e\u0439, \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u044b\u0439: CSS<\/h2>\n<p>\u041d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u0440\u0438\u0434\u0438\u0440\u043a\u0438 \u043a &#171;\u0441\u0442\u0430\u0440\u0438\u0447\u043a\u0443&#187; html? \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u044b\u043d\u0443\u0442\u044c \u043f\u0430\u043b\u043a\u0438 \u0438\u0437 html, \u0441\u043e\u0437\u0434\u0430\u0432 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <strong>layout.css<\/strong>:<\/p>\n<pre><code class=\"css\">html, body {    margin: 0; }  [col], [row] { display: flex; flex-basis: content;  }  [col] { flex-direction: column; height: 100%; }  [row] { flex-direction: row; }  [expand] {   flex-grow: 1; }  [scroll] { overflow-y: auto; background: white; }  [scroll] &gt; * { height: 0; }  [bar] {     background-color: lightblue; }  [panel] {     background-color: bisque; }  [action] { background-color: aqua; }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0430\u0441\u043f\u0435\u043a\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><strong>col<\/strong> &#8212; \u0431\u043b\u043e\u043a \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>row<\/strong> &#8212; \u0431\u043b\u043e\u043a \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p><strong>expand<\/strong> &#8212; \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0443 <strong>row<\/strong> \u0438\u043b\u0438 <strong>col<\/strong> \u0434\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>scroll<\/strong> &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u043c\u0430\u0433\u0438\u044e(25), \u0437\u0430\u0434\u0430\u044e\u0449\u0443\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430);<\/p>\n<\/li>\n<li>\n<p><strong>bar, panel, action<\/strong> &#8212; \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0435\u043a\u0438\u0445 \u043f\u0440\u043e\u0447\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0445 \u0431\u043b\u043e\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u0414\u0438\u0430\u043b\u043e\u0433 \u0437\u0430 \u043a\u0430\u0434\u0440\u043e\u043c<\/summary>\n<div class=\"spoiler__content\">\n<p>&#8212; &#171;\u0422\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c. \u0422\u0430\u043a\u0436\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445! \u0410 \u0432\u0434\u0440\u0443\u0433 IE \u0434\u0440\u0435\u043c\u0443\u0447\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f?!&#187;;<\/p>\n<p>&#8212; &#171;\u041d\u0443 \u0434\u0430, 100501-\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443&#8230; \u0410 \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0448\u044c?&#187;;<\/p>\n<p>&#8212; &#171;\u041a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e!&#187;<\/p>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0438\u0448\u0435\u043c \u043d\u043e\u0432\u044b\u0439 html, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0430\u0448 <strong>css<\/strong>:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"stylesheet\" href=\"layout.css\" \/&gt;  &lt;div col&gt;   &lt;div bar&gt;Header&lt;\/div&gt;    &lt;div row expand&gt; &lt;div panel&gt;Left panel&lt;\/div&gt;  &lt;div scroll expand&gt;   &lt;div&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;     &lt;\/div&gt; &lt;\/div&gt;  &lt;div panel&gt;Right panel&lt;\/div&gt;   &lt;\/div&gt;    &lt;div bar&gt;Footer&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0414\u0430, \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 html, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043a\u0430\u043a \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435. \u041a\u043e\u0434 \u043a\u043e\u0440\u043e\u0447\u0435, \u0438 \u0432\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u0443\u0448\u043b\u0430 \u0432 css, \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e \u043d\u0435\u0439 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e (\u043f\u043e\u0447\u0442\u0438).<\/p>\n<p>\u041f\u0440\u043e\u044f\u0441\u043d\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0431\u043b\u043e\u043a(3) \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <strong>col<\/strong>, \u0438\u0431\u043e \u043e\u043d \u043a\u043e\u043b\u043e\u043d\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0431\u043b\u043e\u043a(4) \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c <strong>bar<\/strong> &#8212; \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0431\u043b\u043e\u043a(6) &#8212; \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c <strong>row,<\/strong> \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0438 <strong>expand<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043d\u044f\u043b \u0432\u0441\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u043f\u0430\u043d\u0435\u043b\u044f\u043c\u0438 <strong>Left panel<\/strong> \u0438 <strong>Right panel<\/strong>;<\/p>\n<\/li>\n<li>\n<p>\u0411\u043b\u043e\u043a \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c(9) \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u043a\u0430\u043a <strong>scroll<\/strong> \u0438 \u043e\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 <strong>expand<\/strong>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p>\u0438 \u0442.\u0434&#8230; <\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0438\u0442\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 css, \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0431\u043b\u043e\u043a\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 <strong>scroll<\/strong>. \u041f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0431\u0435\u0434\u0430, \u0434\u0430\u043b\u0435\u0435 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442!<\/p>\n<p>\u0418 \u0445\u043e\u0442\u044f \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0435\u043d\u0430, \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0442\u0430\u043a \u0438 \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u0435\u0442 &#171;\u043d\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c&#187; \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"stylesheet\" href=\"layout.css\" \/&gt;  &lt;div col&gt;   &lt;div bar&gt;Header&lt;\/div&gt;    &lt;div row expand&gt; &lt;div col panel&gt;Left panel&lt;\/div&gt;  &lt;div scroll expand&gt;   &lt;div&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;     &lt;\/div&gt; &lt;\/div&gt;  &lt;div panel col&gt;       &lt;div&gt;         Right panel       &lt;\/div&gt;        &lt;div scroll expand&gt;         &lt;div&gt;           Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;           Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;Content&lt;br\/&gt;         &lt;\/div&gt;       &lt;\/div&gt;              &lt;div&gt;         Right footer       &lt;\/div&gt; &lt;\/div&gt;   &lt;\/div&gt;      &lt;div bar row&gt;     &lt;div expand&gt;       Footer     &lt;\/div&gt;      &lt;div action&gt;       [Icon]     &lt;\/div&gt;      &lt;div action&gt;       [Action]     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p><strong>Right panel<\/strong>(16) \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <strong>col,<\/strong> \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438(21) \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u043f\u043e \u043e\u0431\u0440\u0430\u0437\u0446\u0443 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 9. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u044d\u0442\u0438 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p><strong>Footer<\/strong>(34) \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <strong>row<\/strong>. \u041d\u0430 \u0434\u0435\u0441\u0435\u0440\u0442, \u0432 \u044d\u0442\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435: \u0435\u0441\u043b\u0438 \u043d\u0435\u043a\u0438\u0439 \u0431\u043b\u043e\u043a(35) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <strong>expand<\/strong> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435(39, 43) &#8212; \u0441\u0438\u0440\u043e\u0442\u043b\u0438\u0432\u043e \u0442\u0435\u0441\u043d\u044f\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 (\u0441\u043f\u0440\u0430\u0432\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435). \u041a\u0443\u0434\u0430 \u0435\u0449\u0435 &#171;\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u0435\u0435&#187; ? <\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e\u0442 \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0423\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 &#171;\u0434\u0438\u0437\u0430\u0439\u043d&#187; \u043d\u0443\u0436\u0435\u043d <\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-348201","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=348201"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/348201\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=348201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=348201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}