Come dimensionare l'altezza di un div all'altezza del contenitore, usando i CSS?come ridimensionare l'altezza di un div all'altezza del contenitore, usando i CSS?
<div class='container'><br>
<div style='display: block; height: 500px'>left</div><br>
<div id='to-be-sized' >right</div><br>
</div>
Impossibile impostare l'altezza dell'elemento contenuto come altezza: 100%;
No, dal momento che il contenitore ha altezza: auto' quindi 'altezza: 100%' ricadrebbe su 'auto'. – Quentin
Lo prendo in altezza: auto è l'impostazione predefinita per un contenitore che non ha un'altezza esplicita impostata? – AJM
Sì (is is the default e stackoverflow non gradisce i commenti di tre caratteri) – Quentin
Se la mia comprensione è corretta e l'altezza di default di un div in cui non è specificata l'altezza è automatica, questo non è possibile senza impostare un'altezza esplicita sul div contenente. Se un'altezza esplicita è impostata sul div contenente quindi l'altezza: 100% sul div contenuto significa che cresce all'altezza del contenitore.
Sembra che tu stia cercando di ottenere colonne di uguale altezza. È possibile utilizzare il metodo fauxcolumns in cui viene utilizzata un'immagine di sfondo per simulare l'altezza uguale. Ci sono altri metodi là fuori.
Devo testimoniare che questo è il metodo più semplice là fuori e ha il miglior supporto per browser. – invot
È una cosa complicata da fare: non esiste un approccio migliore, ma ce ne sono alcuni comuni. Se supponiamo che ciò di cui hai VERAMENTE bisogno è che l'altezza della colonna di destra sia (o sembri essere) equivalente all'altezza della colonna di sinistra, puoi usare una qualsiasi delle tecniche usate frequentemente per ottenere colonne di uguale altezza. This piece contiene alcuni trucchi per ottenere il look e il comportamento giusto. Consiglio di leggerlo per vedere se risolve il tuo problema.
L'altro approccio utilizza Javascript per determinare l'altezza del contenitore e impostare la colonna della mano destra su tale valore. Questa tecnica è stata discussa su SO here. Finché la dimensione del tuo contenitore non è l'unica cosa che determina la dimensione del tuo contenitore esterno, questo dovrebbe essere un approccio valido (se non è così, avrai un problema con l'uovo di gallina che potrebbe causare strani comportamenti).
http://www.alistapart.com/articles/fauxcolumns/ <= Articolo originale che descrive la tecnica delle Faux Columns a cui si collega - che è ciò che il post più in alto richiede realmente;) –
Codice di esempio, è necessario iniziare dall'elemento html in modo da poter utilizzare l'altezza flessibile nei contenitori.
<!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>100% Test</title>
<style type="text/css">
html, body, #inner { height: 100% }
#inner { border: 4px blue solid }
#container { height: 200px; border: 4px red solid }
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html>si può dire al div contenitore per visualizzare come tavolo e hanno il div interno da visualizzare come una cella di tabella.
Il codice HTML
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
Il CSS
#wrap
{
width: 800px;
margin: auto;
}
#header
{
background: red;
}
#main
{
display: table;
}
#nav
{
background: gray;
width: 150px;
display: table-cell;
}
#primaryContent
{
background: yellow;
padding: 0 .5em;
display: table-cell;
}
Correzioni per IE
#wrap
{
width: 800px;
margin: auto;
}
#header, #footer
{
background: red;
}
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
background: gray;
width: 150px;
float: left;
}
#primaryContent
{
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
C'è un modo per fare questo se vi capita di essere usin g jQuery. Come hai chiesto per CSS questa potrebbe non essere un'opzione disponibile per te, ma se puoi utilizzarla farà esattamente quello che vuoi.
$(divToResize).css('height',$(container).innerHeight());
$ (divToResize) è il selettore per la DIV si desidera abbinare l'altezza del suo contenitore e $ (contenitore) è logicamente il contenitore di cui si desidera ottenere altezza.
Questo funzionerà indipendentemente dal fatto che l'altezza del contenitore sia specificata in CSS o meno.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
position:relative;
background-color:#999;
}
#to-be-sized{
position:absolute;
top:0;
height:100%;
background-color:#ddd;
}
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>
È possibile:
o
tua scelta :)
Questa risposta mi ha fatto sorridere =). –
Per anni e anni le tabelle sono state odiate da così tante persone, e per le tabelle annuali sono state l'unica soluzione affidabile a tanti problemi. Lo standard CSS è stato rotto sin dall'inizio. Un problema così semplice dovrebbe essere un gioco da ragazzi, ma non lo è. – GetFree
ho fatto qualcosa di simile a KyokoHunter:
$('div.row').each(function(){
var rowHeight = $(this).innerHeight();
$(this).children('div.column').css('height',rowHeight);
});
Questo passa attraverso ogni riga in un div "tavolo" e rende le altezze tutta partita, fino a quando il le div sono classificate di conseguenza.
So che questo è stato risposto per sempre, ma quando mi imbatto in questo problema al giorno d'oggi, uso Flex Box. È meraviglioso. Vedere A Complete Guide to Flexbox da Chris Coyier
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.child {
flex-grow: 1;
}
.child1 {
min-height: 200px;
background-color: #fee;
}
.child2 {
background-color:#eef;
}<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>Il modulo
Flexbox Layout(Box flessibile) mira a fornire un metodo più efficiente per disporre, allineare e distribuire lo spazio tra gli oggetti in un contenitore, anche quando la loro dimensione è sconosciuta e/o dinamica (quindi la parola "flex").L'idea principale dietro il layout flessibile è quella di dare al contenitore la possibilità di modificare la larghezza/altezza (e l'ordine) dei suoi oggetti per riempire al meglio lo spazio disponibile (principalmente per adattarsi a tutti i tipi di dispositivi di visualizzazione e dimensioni dello schermo) . Un contenitore flessibile espande gli oggetti per riempire lo spazio disponibile disponibile, oppure li riduce per evitare un trabocco.
Ancora più importante, il layout della casella flessibile è indipendente dalla direzione rispetto al layout normale (blocco che è basato verticalmente e in linea che è basato su base orizzontale). Mentre quelli funzionano bene per le pagine, mancano di flessibilità (no pun intended) per supportare applicazioni grandi o complesse (soprattutto quando si tratta di cambiare orientamento, ridimensionamento, stretching, restringimento, ecc.).
Meglio inserire il codice effettivo e citare il link: in questo modo, se il sito non funziona, il codice sarà ancora disponibile. – Wex
I file CSS utilizzano la funzione "padding" per determinare l'altezza e la profondità dei contenitori. Per modificare l'altezza del campo Contenitore, inserire semplicemente i campi di riempimento per i contenitori specificati.
L'estratto di codice sotto è un esempio di CSS usato per una classe contenitore (che si può trovare questo come nel file HTML.
.container{padding-top:100px;padding-bottom:50px}header
non sanno che questo è possibile, ma interessati a qualsiasi risposte – Jon