altezza minima: 100%; height: 100%; non funziona

Non riesco a capire cosa c'è di sbagliato nei miei stili.
Spero che qualcuno possa aiutarmi con questo.
Esempio di codice:altezza minima: 100%; height: 100%; non funziona

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

Il modo in cui dovrebbe essere è come in Opera Browser (vedi immagine): Sample image

fonte

2012-01-09 wzazza

Avete una doctype? –

@MrLister: se non lo fa, può fare riferimento a questo: http://www.w3schools.com/tags/tag_doctype.asp –

sì ho doctype: – wzazza

La Come

http://jsfiddle.net/L9GEa/

L'Perché

Si potrebbe intuitivamente pensare (come ho fatto una volta) che l'elemento HTML ha già una determinata altezza, ma non è così (almeno in questo contesto). Fortunatamente (o di progettazione) questo elemento ha la proprietà unica di determinarne l'altezza quando viene assegnata una percentuale di altezza. Questo è il concetto essenziale perché per calcolare (determinare) l'altezza di ogni altro elemento a cui è assegnata una percentuale di altezza devi anche essere in grado di determinare l'altezza del suo genitore.
Chiunque abbia lavorato con CSS e DOM abbastanza probabilmente ti dirà che odia i float. Questo perché estrae l'elemento dal flusso, il che richiede un lavoro aggiuntivo e il pensiero per destreggiarsi tra gli effetti. Usa invece display: inline-block; vertical-align: top; con l'unica avvertenza che dovrete aggiungere commenti HTML attorno a qualsiasi spazio bianco tra questi elementi.

Il CSS

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px;min-height:250px; 
    /*changes*/ 
    height:100%; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
/*changes*/ 
html, 
body{ 
    height:100%; 
}

Il codice HTML

<div class="maindiv"> 
    <div class="left_inner">Left Block content</div><!-- 
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

fonte

2013-09-14 05:40:02

Questa soluzione ha funzionato per me, quindi l'ho contrassegnata come migliore risposta. Grazie. – wzazza

Nella mia esperienza rilasciare i commenti html e impostare la dimensione del font su 0, sui contenitori interni/elementi impostare la dimensione del font e il ricorrere all'uso display inline-block. Inherrit la dimensione del font dal corpo es. 1rem – Ghost1

Prova questo:

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height: auto; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; height: 100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

La maggior parte del tempo che avete a applica un'altezza di auto o 100% al DIV genitore.

fonte

2012-01-09 14:59:45

funziona anche con l'altezza del pixel per il div esterno. – danijar

Questo non ha funzionato. – wzazza

@sharethis: non è possibile ottenere una REGOLA CSS al 100% se si applica il valore su base pixel. –

aggiungere

html, 
body { 
    height:100% 
}

nella parte superiore del vostro CSS, che funziona per me

EDIT: il mio test:

<!DOCTYPE html> 
<html> 

<head> 
<style> 
html, 
body { 
height:100%; 
} 

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height:100%; 
position:relative; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
position:relative; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
</head> 
<body> 
<div class="maindiv"> 
<div class="left_inner">Left Block content</div> 
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div> 
</body> 
</html>

fonte

2012-04-04 03:09:29 Michel

altezza minima: 100%; height: 100%; non funziona

risposta

Problemi correlati