Cosa sta succedendo qui?Il riempimento CSS ignora l'overflow?
#agendaTitle{
margin:0;
padding:20em 0em 0em 0.75em;
height:3em;
overflow:hidden;
background-color:#ff00ff;
}
L'imbottitura superiore è ridicolmente alto solo per dimostrare - con un requisito realistico div aumenta ancora altezza in modo proporzionale.
Sicuramente il overflow:hidden significa che dovrei solo vedere un blocco di colore? si verifica in FF e IE
Nel modello casella predefinita content-box su un elemento display: block, padding e height vengono sommati per determinare l'altezza totale dell'elemento. overflow riguarda solo le cose fuori dagli schemi (al di fuori dell'altezza + padding + bordo).
Se si desidera che il bordo e il riempimento vengano sottratti dall'altezza specificata anziché aggiunti, utilizzare box-sizing: border-box.
Sono sbalordito da quanti anni non ho saputo che il padding aumenti le dimensioni della scatola. Davvero sono assolutamente sbalordito. Comunque, come la maggior parte delle altre risposte erano giuste, questo è stato il primo postato – Datadimension
@TimHigham Grazie! Di fatto, le vecchie versioni di IE usano il modello di casella di stile 'border-box', dove padding e border vengono sottratti dall'altezza piuttosto che aggiunti come nel box box predefinito' content-box' di CSS. Non hanno aggiunto il supporto per il modello 'content-box' conforme agli standard fino a IE6, e anche allora non era predefinito! – Ennui
IE - non ti piace !!! – Datadimension
Ti piace questa
css
*{
margin:0;
padding:0;
}
#agendaTitle{
margin:0;
padding:0.75em 0em 0em 0.75em;
height:3em;
overflow:hidden;
background-color:#ff00ff;
}
Hai impostare l'altezza a 3em, quindi mostrerà l'altezza finale di (3em + 20em).
E l'overflow limiterà solo per l'altezza i.e 3em.
Cosa stai chiedendo? Cerca di spiegarti meglio e postalo su JSFiddle per favore. – Ennui
Supponendo che si stia utilizzando il modello di box predefinito (riquadro del contenuto) che dovrebbe essere visualizzato come un blocco di colore solido alto 23em (supponendo che si trovi su un elemento di visualizzazione: block' div) o altro. il riempimento viene aggiunto all'altezza e nessuno di essi è "esterno" al riquadro o nascosto dall'overflow. Se vuoi che il riempimento sia sottratto dall'altezza piuttosto che aggiunto ad esso, usa 'dimensionamento della scatola: border-box'. – Ennui