Fai in modo che un div riempia l'altezza dello spazio rimanente sullo schermo
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto lavorando su un'applicazione web in cui desidero che il contenuto riempia l'altezza dell'intero schermo.
La pagina ha un'intestazione che contiene un logo e informazioni sull'account.Potrebbe trattarsi di un'altezza arbitraria.Voglio che il div contenuto riempia il resto della pagina fino in fondo.
Ho un'intestazione div e un contenuto div.Al momento sto utilizzando una tabella per il layout in questo modo:
CSS eHTML
#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>L'intera altezza della pagina viene riempita e non è necessario lo scorrimento.
Per qualsiasi cosa all'interno del contenuto div, setting top: 0; lo metterà proprio sotto l'intestazione.A volte il contenuto sarà una vera tabella, con l'altezza impostata al 100%.Mettendo header dentro content non permetterà che funzioni.
Esiste un modo per ottenere lo stesso effetto senza utilizzare il table?
Aggiornamento:
Elementi all'interno del contenuto div avrà anche le altezze impostate su percentuali.Quindi qualcosa al 100% all'interno del file div lo riempirà fino in fondo.Così come due elementi al 50%.
Aggiornamento 2:
Ad esempio, se l'intestazione occupa il 20% dell'altezza dello schermo, una tabella specificata al 50% all'interno #content occuperebbe il 40% dello spazio sullo schermo.Finora, racchiudere il tutto in una tabella è l'unica cosa che funziona.
Soluzione
Aggiornamento 2015:l'approccio flexbox
Ci sono altre due risposte che menzionano brevemente flexbox;tuttavia, ciò è avvenuto più di due anni fa e non forniscono alcun esempio.Le specifiche per flexbox ora sono definitivamente stabilite.
Nota:Sebbene la specifica del layout CSS Flexibox sia in fase di raccomandazione del candidato, non tutti i browser l'hanno implementata.L'implementazione WebKit deve avere il prefisso -webkit-;Internet Explorer implementa una vecchia versione delle specifiche, con il prefisso -ms-;Opera 12.10 implementa l'ultima versione delle specifiche, senza prefisso.Consulta la tabella di compatibilità su ciascuna proprietà per uno stato di compatibilità aggiornato.
(preso da https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
Tutti i principali browser e IE11+ supportano Flexbox.Per IE 10 o versioni precedenti, puoi utilizzare lo spessore FlexieJS.
Per verificare il supporto attuale puoi anche vedere qui:http://caniuse.com/#feat=flexbox
Esempio funzionante
Con flexbox puoi passare facilmente da una qualsiasi delle tue righe o colonne con dimensioni fisse, dimensioni del contenuto o dimensioni dello spazio rimanente.Nel mio esempio ho impostato l'intestazione in modo che si agganci al suo contenuto (come da domanda sui PO), ho aggiunto un piè di pagina per mostrare come aggiungere una regione ad altezza fissa e quindi impostare l'area del contenuto per riempire lo spazio rimanente.
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>Nel CSS sopra, il flettere proprietà abbrevia il crescita flessibile, termoretraibile, E base flessibile proprietà per stabilire la flessibilità degli elementi flessibili.Mozilla ha un buona introduzione al modello delle scatole flessibili.
Altri suggerimenti
In realtà non esiste un modo valido e cross-browser per farlo nei CSS.Supponendo che il tuo layout abbia delle complessità, devi utilizzare JavaScript per impostare l'altezza dell'elemento.L'essenza di ciò che devi fare è:
Element Height = Viewport height - element.offset.top - desired bottom margin
Una volta ottenuto questo valore e impostato l'altezza dell'elemento, è necessario allegare gestori di eventi sia alla finestra onload che a onresize in modo da poter attivare la funzione di ridimensionamento.
Inoltre, supponendo che il contenuto possa essere più grande del viewport, dovrai impostare overflow-y per scorrere.
Il post originale risale a più di 3 anni fa.Immagino che molte persone che vengono a questo post come me stiano cercando una soluzione di layout simile a un'app, diciamo un'intestazione, un piè di pagina e un contenuto a tutta altezza in qualche modo fissi che occupino il resto dello schermo.Se è così, questo post può essere d'aiuto, funziona su IE7+, ecc.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Ed ecco alcuni frammenti di quel post:
@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>Invece di utilizzare le tabelle nel markup, potresti utilizzare le tabelle CSS.
Markup
<body>
<div>hello </div>
<div>there</div>
</body>
(Pertinente) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
Alcuni vantaggi di questo metodo sono:
1) Meno margine
2) Il markup è più semantico delle tabelle, perché non si tratta di dati tabulari.
3) Il supporto del browser è Molto bene:IE8+, tutti i browser e i dispositivi mobili moderni (posso usare)
Solo per completezza, ecco gli elementi Html equivalenti alle proprietà CSS per il file Il modello di tabella CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Approccio solo CSS (se l'altezza è nota/fissa)
Quando vuoi che l'elemento centrale si estenda verticalmente sull'intera pagina, puoi utilizzare calc() che è stato introdotto nei CSS3.
Supponendo di avere a altezza fissa header E footer elementi e vogliamo il section tag per prendere l'intera altezza verticale disponibile...
Markup presunto
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
Quindi il tuo CSS dovrebbe essere
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;
}
Quindi qui, quello che sto facendo è sommare l'altezza degli elementi e poi sottrarre da 100% utilizzando calc() funzione.
Assicurati solo di usarlo height: 100%; per gli elementi genitori.
Usato:height: calc(100vh - 110px);
codice:
.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>Che ne dici di usare semplicemente vh che sta per view height In CSS...
Guarda al frammento di codice Ho creato per te di seguito ed eseguilo:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>Inoltre, guarda l'immagine qui sotto che ho creato per te:
CSS3 in modo semplice
height: calc(100% - 10px); // 10px is height of your first div...
tutti i principali browser al giorno d'oggi lo supportano, quindi vai avanti se non hai l'obbligo di supportare i browser vintage.
Potrebbe essere fatto esclusivamente da CSS utilizzando 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;
}
e il HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
L'ho controllato, funziona con tutti i principali browser: Chrome, IE, E FireFox
Una soluzione semplice, utilizzando flexbox:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>Una soluzione alternativa, con un div centrato all'interno del div contenuto
Nessuna delle soluzioni pubblicate funziona quando è necessario che il div inferiore scorra quando il contenuto è troppo alto.Ecco una soluzione che funziona in questo caso:
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;
}
Ho cercato una risposta anche per questo.Se sei abbastanza fortunato da poter scegliere come target IE8 e versioni successive, puoi utilizzare display:table e valori correlati per ottenere le regole di rendering delle tabelle con elementi a livello di blocco inclusi div.
Se sei ancora più fortunato e i tuoi utenti utilizzano browser di alto livello (ad esempio, se si tratta di un'app Intranet sui computer che controlli, come il mio ultimo progetto), puoi utilizzare il nuovo Layout della scatola flessibile nei CSS3!
Ciò che ha funzionato per me (con un div all'interno di un altro div e presumo in tutte le altre circostanze) è impostare il riempimento inferiore al 100%.Cioè, aggiungi questo al tuo css/foglio di stile:
padding-bottom: 100%;
Disclaimer:La risposta accettata dà l'idea della soluzione, ma la trovo un po' gonfia con un wrapper e regole CSS non necessarie.Di seguito è riportata una soluzione con pochissime regole CSS.
HTML5
<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 */
}
La soluzione di cui sopra utilizza unità di visualizzazione E flexbox, ed è quindi IE10+, a condizione che si utilizzi la vecchia sintassi per IE10.
Codepen con cui giocare: collegamento a codepen
Oppure questo, per chi ha bisogno che il contenitore principale sia scorrevole in caso di contenuto in eccesso: collegamento a codepen
<!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>
In tutti i browser sani di mente, puoi inserire il div "intestazione" prima del contenuto, come fratello, e lo stesso CSS funzionerà.Tuttavia, IE7- non interpreta correttamente l'altezza se il float è al 100%, quindi l'intestazione deve essere NEL contenuto, come sopra.Il traboccamento:auto causerà doppie barre di scorrimento su IE (che ha sempre la barra di scorrimento della finestra visibile, ma disabilitata), ma senza di essa, il contenuto verrà tagliato se trabocca.
Ci sono un sacco di risposte ora, ma ho trovato using height: 100vh; per lavorare sull'elemento div che deve riempire tutto lo spazio verticale disponibile.
In questo modo non ho bisogno di giocare con la visualizzazione o il posizionamento.Ciò è stato utile quando si utilizzava Bootstrap per creare una dashboard in cui avevo una barra laterale e una principale.Volevo che il principale si allungasse e riempisse l'intero spazio verticale in modo da poter applicare un colore di sfondo.
div {
height: 100vh;
}
Supporta IE9 e versioni successive: fare clic per vedere il collegamento
Se riesci a gestire il mancato supporto dei vecchi browser (ovvero MSIE 9 o versioni precedenti), puoi farlo con Modulo di layout scatola flessibile che è già W3C CR.Quel modulo consente anche altri trucchi interessanti, come riordinare i contenuti.
Sfortunatamente, MSIE 9 o versioni precedenti non lo supportano ed è necessario utilizzare il prefisso del fornitore per la proprietà CSS per ogni browser diverso da Firefox.Si spera che anche altri fornitori abbandonino presto il prefisso.
Un'altra scelta sarebbe Layout della griglia CSS ma ha ancora meno supporto da parte delle versioni stabili dei browser.In pratica, solo MSIE 10 lo supporta.
Ho lottato con questo per un po' e alla fine ho ottenuto quanto segue:
Dato che è facile rendere il DIV del contenuto alla stessa altezza del genitore ma apparentemente difficile renderlo l'altezza del genitore meno l'altezza dell'intestazione, ho deciso di rendere il div del contenuto a tutta altezza ma posizionarlo assolutamente nell'angolo in alto a sinistra e quindi definire un riempimento per la parte superiore che ha l'altezza dell'intestazione.In questo modo il contenuto viene visualizzato ordinatamente sotto l'intestazione e riempie tutto lo spazio rimanente:
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%;
}
Perché non proprio così?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
Dare a html e body (in quest'ordine) un'altezza e poi dare semplicemente un'altezza ai tuoi elementi?
Per me va bene
style="height:100vh"
mi ha risolto il problema.Nel mio caso l'ho applicato al div richiesto
Semplicemente definendo il body con display:grid e il grid-template-rows utilizzando auto e il fr proprietà di valore.
* {
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>Puoi effettivamente usare display: table per dividere l'area in due elementi (intestazione e contenuto), dove l'intestazione può variare in altezza e il contenuto riempie lo spazio rimanente.Funziona con l'intera pagina, anche quando l'area è semplicemente il contenuto di un altro elemento posizionato con position impostato relative, absolute O fixed.Funzionerà finché l'elemento genitore ha un'altezza diversa da zero.
Guarda questo violino e anche il codice qui sotto:
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>
Vincent, ti risponderò di nuovo utilizzando le tue nuove esigenze.Poiché non ti interessa che il contenuto venga nascosto se è troppo lungo, non è necessario rendere mobile l'intestazione.Metti semplicemente l'overflow nascosto nei tag html e body e imposta #content altezza al 100%.Il contenuto sarà sempre più lungo del viewport in base all'altezza dell'intestazione, ma sarà nascosto e non causerà barre di scorrimento.
<!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>
Prova questo
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Ho trovato una soluzione abbastanza semplice, perché per me era solo una questione di progettazione.Volevo che il resto della pagina non fosse bianco sotto il piè di pagina rosso.Quindi ho impostato il colore di sfondo delle pagine su rosso.E il colore di sfondo del contenuto diventa bianco.Con l'altezza del contenuto impostata ad es.20em o 50% una pagina quasi vuota non lascerà l'intera pagina rossa.
Per l'app mobile utilizzo solo VH e 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;
}
Dimostrazione - https://jsfiddle.net/u763ck92/
Ho avuto lo stesso problema ma non sono riuscito a far funzionare la soluzione con i flexbox sopra.Quindi ho creato il mio modello, che include:
- un'intestazione con un elemento di dimensione fissa
- un piè di pagina
- una barra laterale con una barra di scorrimento che occupa la restante altezza
- contenuto
Ho utilizzato i flexbox ma in modo più semplice, utilizzando solo le proprietà Schermo:flettere E direzione flessibile:riga|colonna:
Utilizzo angolare e voglio che le dimensioni dei miei componenti siano al 100% del loro elemento genitore.
La chiave è impostare la dimensione (in percentuale) per tutti i genitori per limitarne la dimensione.Nell'esempio seguente l'altezza della mia app ha il 100% del viewport.
Il componente principale occupa il 90% del viewport, poiché intestazione e piè di pagina ne occupano il 5%.
Ho postato il mio modello qui: 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>
Dando vita all'idea di Mr.Alieno...
Questa sembra una soluzione più pulita rispetto al popolare flex box per i browser abilitati CSS3.
Usa semplicemente min-height(invece di Height) con calc() nel blocco di contenuto.
Il calc() inizia con 100% e sottrae le altezze di intestazioni e piè di pagina (è necessario includere valori di riempimento)
L'uso di "min-height" invece di "height" è particolarmente utile in modo che possa funzionare con contenuti renderizzati in JavaScript e framework JS come Angular2.In caso contrario, il calcolo non spingerà il piè di pagina in fondo alla pagina una volta che il contenuto renderizzato in JavaScript sarà visibile.
Ecco un semplice esempio di intestazione e piè di pagina che utilizzano un'altezza di 50 px e un riempimento di 20 px per entrambi.
HTML:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
Certo, i conti possono essere semplificati ma hai un'idea...
È un calcolo dinamico dello spazio rimanente sullo schermo, meglio se utilizzando Javascript.
Puoi utilizzare la tecnologia CSS-IN-JS, come sotto lib:
https://github.com/cssobj/cssobj
DIMOSTRAZIONE: https://cssobj.github.io/cssobj-demo/
Esso non ha mai funzionato per me in modo diverso dall'uso di JavaScript come suggerito dal NICCAI nella primissima risposta.Sto usando questo approccio per ridimensionare il file <div> con le mappe di Google.
Ecco l'esempio completo di come farlo (funziona in Safari/FireFox/IE/iPhone/Andorid (funziona con la rotazione)):
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
