it-swarm-eu.dev

Vyplňte výšku zbývajícího místa na obrazovce div

Pracuji na webové aplikaci, kde chci, aby obsah vyplňoval výšku celé obrazovky.

Stránka má záhlaví, které obsahuje logo a informace o účtu. To může být libovolná výška. Chci, aby obsah div vyplnil zbytek stránky na dno.

Mám hlavičku div a obsah div. V tuto chvíli používám tabulku pro rozvržení takto:

CSS a HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Vyplní se celá výška stránky a nevyžaduje se rolování.

Pro cokoliv uvnitř obsahu div, nastavení top: 0; umístí to přímo pod záhlaví. Někdy bude obsah skutečným stolem s výškou nastavenou na 100%. Uvedení header dovnitř content to nedovolí pracovat.

Existuje způsob, jak dosáhnout stejného efektu bez použití table?

Aktualizace:

Prvky uvnitř obsahu div budou mít také výšku nastavenou na procenta. Takže něco na 100% uvnitř div ho vyplní na dno. Stejně jako dva prvky na 50%.

Aktualizace 2:

Pokud například záhlaví zabere 20% výšky obrazovky, bude tabulka zadaná na 50% uvnitř #content zabírat 40% prostoru obrazovky. Dosavadní zabalení celé věci do stolu je jediná věc, která funguje.

1574
Vincent McNabb

Aktualizace 2015: přístup flexbox

Další dvě odpovědi stručně uvádějí flexbox ; to však bylo před více než dvěma lety a neposkytují žádné příklady. Specifikace pro flexbox se rozhodně vyřešila.

Poznámka: Přestože specifikace CSS Flexible Boxes Layout je ve fázi doporučení kandidáta, ne všechny prohlížeče ji implementovaly. Implementace WebKit musí být předponou -webkit-; Internet Explorer implementuje starou verzi spec, předponou -ms-; Opera 12.10 implementuje nejnovější verzi spec, unprefixed. Aktuální stav kompatibility naleznete v tabulce kompatibility jednotlivých vlastností.

(převzato z https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )

Všechny hlavní prohlížeče a podpora IE11 + Flexbox. Pro IE 10 nebo starší můžete použít podložka FlexieJS.

Aktuální podporu naleznete také zde: http://caniuse.com/#feat=flexbox

Pracovní příklad

S flexboxem můžete snadno přepínat mezi některým z vašich řádků nebo sloupců, které mají pevné rozměry, rozměry velikosti obsahu nebo rozměry zbývajícího prostoru. V mém příkladu jsem nastavil záhlaví, aby přilnulo k jeho obsahu (podle otázky OP), přidal jsem zápatí, abych ukázal, jak přidat oblast s pevnou výškou, a pak nastavte obsahovou oblast tak, aby vyplnila zbývající prostor.

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Ve výše uvedeném CSS, flex vlastnost shorthands flex-grow , flex-shrink , a flex-basis vlastnosti pro stanovení flexibilitu položek flex. Mozilla má dobrý úvod do modelu flexibilních boxů .

856
Pebbl

V CSS to opravdu není zdravý způsob, jak to udělat. Za předpokladu, že vaše rozvržení má složitosti, je třeba nastavit výšku prvku pomocí JavaScriptu. Podstatou toho, co musíte udělat, je:

Element Height = Viewport height - element.offset.top - desired bottom margin

Jakmile můžete získat tuto hodnotu a nastavit výšku prvku, musíte připojit obslužné rutiny událostí k oběma naloading okna a onresize, takže můžete vypnout funkci změny velikosti.

Také za předpokladu, že váš obsah může být větší než výřez, budete muset nastavit přetečení y pro rolování.

216
NICCAI

Původní příspěvek je více než 3 roky. Myslím, že mnoho lidí, kteří přijdou na tento post, jako jsem já, hledají řešení pro aplikace, jako je nějaká pevná záhlaví, zápatí a obsah s plnou výškou zabírající zbytek obrazovky. Pokud ano, může tento příspěvek pomoci, funguje na IE7 + atd.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Zde jsou některé úryvky z tohoto příspěvku:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>
160
h--n

Pouze CSS Přístup (je-li výška známa/pevná)

Pokud chcete, aby se prostřední prvek pohyboval po celé stránce vertikálně, můžete použít calc() který je zaveden v CSS3.

Za předpokladu, že máme pevné výškyheader a footer prvky a chceme, aby značka section brala celou dostupnou vertikální výšku ...

Demo

Předpokládané značení

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Takže vaše CSS by mělo být

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

Takže tady, co dělám, je sčítání výšky prvků a než odečítání od 100% pomocí funkce calc().

Ujistěte se, že používáte height: 100%; pro nadřazené prvky.

81
Mr. Alien

Použité: height: calc(100vh - 110px);

kód:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>
46
nguyên

Co takhle jednoduše použijte vh, což znamená view height vCSS...

Podívejte se na fragment kódu Vytvořil jsem pro vás níže a spusťte jej:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Podívejte se také na obrázek níže, který jsem pro vás vytvořil:

 Make a div fill the height of the remaining screen space

32
Alireza

CSS3 Simple Way

height: calc(100% - 10px); // 10px is height of your first div...

všechny hlavní prohlížeče tyto dny podporují, takže pokračujte, pokud nemáte požadavek na podporu historických prohlížečů.

30
dev.meghraj

Lze to provést pouze pomocí CSS pomocí vh:

#page 
{
  display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent 
{
  float:left; width:100%; display:block;
}
#content 
{      
float:left; width:100%; height:100%; display:block; overflow:scroll;
}

a HTML

<div id="page">
   <div id="tdcontent">
   </div>
   <div id="content">
   </div>
</div>

Zkontroloval jsem to, funguje ve všech hlavních prohlížečích: Chrome, IE a FireFox

26
Ormoz

Žádná z řešení nepředložila práci, když potřebujete dolní div pro posouvání, když je obsah příliš vysoký. Zde je řešení, které v tomto případě funguje:

HTML:

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Původní zdroj: Vyplnění zbývající výšky kontejneru při zpracování přetečení v CSS

JSFiddle live náhled

25
John Kurlak

Jednoduché řešení pomocí flexboxu:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>

Vzorek kodifikovaného souboru

Alternativní řešení, se středem v rámci obsahu div

23
zok

Také jsem hledal odpověď. Pokud máte to štěstí, že můžete cílit na IE8 a nahoru, můžete použít display:table a související hodnoty, abyste získali pravidla pro vykreslování tabulek s prvky na úrovni bloku, včetně div.

Pokud jste ještě šťastnější a vaši uživatelé používají prohlížeče nejvyšší úrovně (například pokud se jedná o intranetovou aplikaci na počítačích, které ovládáte, stejně jako můj poslední projekt), můžete použít nové Flexibilní rozložení schránky v CSS3 !

22
Chris

To, co pro mě fungovalo (s div v rámci jiného div a předpokládám, že za všech ostatních okolností) je nastavení spodního polstrování na 100%. To znamená, že je přidejte do své css/stylesheet:

padding-bottom: 100%;

Zřeknutí se odpovědnosti: Přijatá odpověď dává představu o řešení, ale zjistím, že je to trochu nafouknuté zbytečnými pravidly wrapperu a css. Níže je řešení s velmi malými pravidly css.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Řešení výše používá viewport jednotky a flexbox , a je tedy IE10 +, pokud používáte starou syntaxi pro IE10.

Codepen hrát s: odkaz na codepen

Nebo toto, pro ty, kteří potřebují, aby byl hlavní kontejner posouvatelný v případě přetékajícího obsahu: link to codepen

14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

Ve všech zdravých prohlížečích můžete umístit "hlavičky" div před obsah, jako sourozenec, a stejný CSS bude fungovat. Nicméně, IE7- neinterpretuje výšku správně, pokud float je 100% v tomto případě, takže záhlaví musí být v obsahu, jak je uvedeno výše. Přetečení: auto způsobí dvojité rolovací lišty v IE (který má vždy viditelný posuvný pruh pohledu, ale zakázán), ale bez něj se obsah přetáhne, pokud přeteče.

12
Jerph

Chvíli jsem s tím zápasil a skončil s následujícími:

Vzhledem k tomu, že je snadné vytvořit obsah DIV ve stejné výšce jako nadřazený, ale zřejmě je obtížné, aby byl nadřazený výška mínus výška záhlaví, rozhodl jsem se, že se obsah div plně nastaví, ale absolutně ho umístěte do levého horního rohu a pak definujte výplň pro horní část, která má výšku hlavičky. Tímto způsobem se obsah zobrazí úhledně pod hlavičkou a vyplní celý zbývající prostor:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}
10
B_G

Pokud se můžete vypořádat s nepodporováním starých prohlížečů (tj. MSIE 9 nebo starších), můžete to udělat s Flexibilním Box Layout Module který je již W3C ČR. Tento modul umožňuje i další pěkné triky, jako je například přeskupování obsahu.

Bohužel, MSIE 9 nebo méně nepodporují toto a vy musíte použít předponu dodavatele pro vlastnost CSS pro každý jiný prohlížeč než Firefox. Doufejme, že i ostatní prodejci brzy opustí předponu.

Další možností by bylo CSS Grid Layout , ale to má ještě menší podporu ze stabilních verzí prohlížečů. V praxi to podporuje pouze MSIE 10.

10

Teď je tu tona odpovědí, ale našel jsem pomocí height: 100vh; pracovat na elementu div, který potřebuje vyplnit celý vertikální prostor, který je k dispozici.

Tímto způsobem nemusím hrát s displejem nebo polohováním. To bylo užitečné, když používáte Bootstrap, aby se řídicí panel, kde jsem měl postranní panel a hlavní. Chtěl jsem, aby se hlavní natáhl a vyplnil celý vertikální prostor, abych mohl použít barvu pozadí.

div {
    height: 100vh;
}

Podporuje IE9 a vyšší: kliknutím zobrazíte odkaz

10
Puiu

Proč ne takhle?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Dává vám html a tělo (v tomto pořadí) výšku a pak stačí dát svým prvkům výšku?

Pracuje pro mě

9
Thaoms
 style="height:100vh"

vyřešil problém. V mém případě jsem to aplikoval na požadovaný div

7
Zohab Ali

Řešení CSS Grid

Stačí definovat body s display:grid a grid-template-rows pomocí vlastnosti auto a fr value.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Kompletní průvodce mřížkami @ CSS-Tricks.com

6
Paulie_D

Můžete skutečně použít display: table rozdělit oblast na dva prvky (záhlaví a obsah), kde záhlaví může lišit výšku a obsah vyplní zbývající prostor. To funguje s celou stránkou, stejně jako když je oblast jednoduše obsahem jiného prvku umístěného s position nastaveným na relative, absolute nebo fixed. Bude fungovat tak dlouho, dokud má nadřazený prvek nenulovou výšku.

Podívejte se na toto housle a také níže uvedený kód:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>
5
Amiramix

Vincente, znovu odpovím na vaše nové požadavky. Vzhledem k tomu, že se nestaráte o to, aby se obsah skrýval, pokud je příliš dlouhý, nemusíte plovoucí záhlaví plovoucí. Prostě umístěte přetečení skryté na tagech html a body a nastavte #content height na 100%. Obsah bude vždy delší než výřez podle výšky záhlaví, ale bude skryt a nebude způsobovat posuvníky.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>
5
Jerph

Zkuste to

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
4
Arun

Našel jsem poměrně jednoduché řešení, protože pro mě to byl jen návrh. Chtěl jsem, aby zbytek stránky nebyl bílý pod červeným zápatím. Nastavil jsem tedy barvu pozadí stránky na červenou. A obsah backgroundcolor na bílou. S výškou obsahu nastavenou např. Na. 20% nebo 50% téměř prázdná stránka nenechá celou stránku červenou.

3
htho

Pro mobilní aplikace používám pouze VH a VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Demo - https://jsfiddle.net/u763ck92/

3
grinmax

Spřádání myšlenky pana Aliena ...

Zdá se, že je to čistší řešení než populární flex box jeden pro prohlížeče s podporou CSS3.

Jednoduše použijte min-height (místo výšky) s calc () k bloku obsahu.

Calc () začíná 100% a odečítá výšky záhlaví a zápatí (je třeba zahrnout hodnoty výplně)

Použití "min-height" namísto "height" je obzvláště užitečné, takže může pracovat s vykresleným obsahem javascriptu a JS frameworkem jako Angular2. V opačném případě kalkulace nebude po zobrazení obsahu vykresleného javascriptem tlačit zápatí do dolní části stránky.

Zde je jednoduchý příklad záhlaví a zápatí pomocí 50px výšky a 20px polstrování pro oba.

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Samozřejmě, matematika může být zjednodušena, ale dostanete nápad ...

2
Pat M

Měl jsem stejný problém, ale nemohl jsem práci s řešením flexboxes výše. Vytvořil jsem tedy vlastní šablonu, která zahrnuje:

  • záhlaví s prvkem pevné velikosti
  • zápatí
  • boční lištu s posuvníkem, který zabírá zbývající výšku
  • obsah

Použil jsem flexbox, ale jednodušším způsobem, pouze pomocí vlastností display: flex a flex-direction: row | column :

Používám hranaté a chci, aby moje velikost komponent byla 100% jejich mateřského elementu.

Klíčem je nastavit velikost (v procentech) pro všechny rodiče, aby se omezila jejich velikost. V následujícím příkladu má výška myapp 100% výřezu.

Hlavní komponenta má 90% výřezu, protože záhlaví a zápatí mají 5%.

Zde jsem poslal svou šablonu: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>
2

Je to dynamický calc remining obrazovky prostoru, lépe pomocí Javascript.

Můžete použít technologii CSS-IN-JS, jako např. Lib:

https://github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

0
James Yang