corpo HTML è più piccolo rispetto ai suoi contenuti

Ecco una base illustration del problema:corpo HTML è più piccolo rispetto ai suoi contenuti

<html><head><style type="text/css"> 
    html {width: 100%; height: 100%; background: red;} 
    body {width: 100%; height: 100%; background: green;} 
     
    .leftbar, .rightbar {height: 100%; background: blue;} 

    .leftbar  {float: left;} 
    .rightbar {float: right;} 

    table {width: 100px; height: 800px; background: black; color: white; 
           margin: 0 auto 0 auto;} 
</style></head> 
<body> 
    <ul class="leftbar"><li>one</li><li>two</li></ul> 
    <ul class="rightbar"><li>alpha</li><li>beta</li></ul> 
    <table><tbody><tr><td>blah blah</td></tr></tbody></table> 
</body> 
</html>

Possiamo subito vedere che le galleggiavano ul elementi sono alto come la body che li contiene, il problema è che il body non è alto come lo table che contiene.

Come è possibile che lo body sia sufficientemente grande? In questo esempio, voglio che lo leftbar e lo rightbar scendano fino in fondo, fino a quando lo scorrimento lo consente, in modo da non poter mai vedere spazi vuoti al di sotto di essi.

fonte

2012-02-22 spraff

-1

Utilizzare tabelle. Sono impuri, ma lavorano .

Le soluzioni basate su div implicano compromessi inaccettabili (dimensioni assolute, perdita di galleggiamento).

fonte

2012-02-24 17:09:06 spraff

_fsvo_ "lavoro". È miope pensare che solo perché lavorano per il tuo caso d'uso specifico, devono lavorare per tutti gli altri contesti in cui i tuoi contenuti saranno accessibili. –

Lavorano nel contesto necessario e le alternative * non *. – spraff

Non riflette bene sulla nostra comunità che sconsigliamo una risposta valida che potenzialmente risolva il problema dell'OP, semplicemente perché è fuori moda. Le tabelle sono difficili da mantenere e interrompono il flusso normale, ma rappresentano una soluzione intelligente a diversi problemi spinosi del layout, in particolare in un mondo pre-flexbox. (Come 'display: table;' su un normale elemento block-level.) – XML

Rimuovere height: 100% dalla regola body - questo rende il corpo alto come l'altezza del viewport (che è inferiore all'altezza del contenuto).

fonte

2012-02-22 16:02:58

Ciò rende il 'body' più alto, ma il' ul' è ancora solo l'altezza del viewport. – spraff

Ha senso. Perché 'ul's riempia il' corpo', ha bisogno di avere un determinato set di altezza. Impostalo a '800px', come il suo elemento figlio più alto. –

Questo ha molto senso e ha risolto completamente questo problema fastidioso che ho avuto su un sito come un anno fa. L'ho cambiato da altezza: 100% a min-altezza: 100% per tenere conto delle pagine in cui il corpo è più corto del viewport. Grazie! – elainevdw

body{ height:100%; }

Questo sembra essere un fraintendimento del codice. Un'altezza "100%" è relativa a qualcosa. In altre parole "100% di cosa?"

Ciò che fa è impostare body = la dimensione della finestra. in JSFiddle, è la dimensione della casella renderizzata. Su un browser, sarebbe il 100% della finestra di visualizzazione.

Quindi, se la finestra del browser viene ridotta a un piccolo spazio di visualizzazione, il 100% di altezza sarà pari al 100% delle dimensioni ridotte. Che è preciso

Se si dispone di contenuti più lunghi di quelli, è possibile eseguire i problemi che si vedono nell'esempio. Ricorda che la tabella è un elemento figlio, non un contenitore genitore. Il CSS eredita dai genitori, non dai bambini. Quindi devi assicurarti che BODY rimanga dinamico nella sua altezza.

aggiornamento

Ecco un JSFiddle per min-height sul corpo; http://jsfiddle.net/uZCKn/1/ È necessario che l'altezza dell'HTML sia 100% per funzionare. Ottenuto da qui: min-height does not work with body

L'unica cosa che posso pensare è un JavaScript per impostare l'altezza delle barre laterali o per usare le faux-colonne. Ma potrebbe esserci qualcos'altro in corso per ottenere la barra sinistra/destra per riempire l'altezza dei contenitori e che mi manchi.

C'è una parte di una spiegazione.

fonte

2012-02-22 16:14:01 jmbertucci

http://jsfiddle.net/6ZeLh/

Per fissare la statura non andare fino in fondo cambia body{height:100%} a min-height:100%. Se ti interessa, questo non funzionerà in IE6. Per correggere i tuoi elenchi fai fuori i float. Aggiungere position:relative al body, aggiungere position:absolute per .leftbar, .rightbar e impostare le posizioni come segue

.leftbar {left:0; top:0;} 
.rightbar {right:0; top:0;}

Lo si può vedere nel violino ho linkato sopra.

fonte

2012-02-22 16:21:32 hradac

Ah, questa è una buona soluzione. Rendi le barre laterali in posizione assoluta. – jmbertucci

Se si utilizzano i float, è necessario utilizzare il clearfix. Esempio (overflow: hidden per div genitore si danno una semplice correzione chiara):

<div style="overflow: hidden;"> 
    <ul class="leftbar"> 
     <li>one</li> 
     <li>two</li> 
    </ul> 
    <ul class="rightbar"> 
     <li>alpha</li> 
     <li>beta</li> 
    </ul> 
</div>

si può google più clearfixes, in particolare per il vostro caso

fonte

2016-03-19 08:38:14 Indevelop

rimuovere

html, body { height: 100%; }

e aggiungere

body { height: fit-content; }

L'altra cosa è certificare che non ci sono div questo sta rendendo le cose più piccole di quanto dovrebbe essere davvero.

fonte

2017-11-07 14:27:53

'fit-content' è una proprietà sperimentale che non dovrebbe essere utilizzata nel codice di produzione nel 2017. – TylerH

@TylerH potresti pubblicare qualche link per saperne di più su questo problema? –

corpo HTML è più piccolo rispetto ai suoi contenuti

risposta

Problemi correlati