CSS: è possibile ottenere un div che è al 100% di altezza, meno un margine superiore e inferiore?

posso ottenere un'altezza div 100%, come questo:CSS: è possibile ottenere un div che è al 100% di altezza, meno un margine superiore e inferiore?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <title>T5</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <link rel="stylesheet" type="text/css" 
      href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> 
    </link> 

    <style type="text/css"> 
     * { padding: 0; margin: 0; } 
     html, body { height: 100%; } 
     body { 
     font-family: "lucida sans", verdana, arial, helvetica, sans-serif; 
     font-size: 75%; 
     } 
     h1 { font-weight: bold; font-size: 1.4em; padding: 10px 10px 0;} 
     p { padding: 0 10px 1em; } 
     #container { 
     min-height: 100%; 
     background-color: #DDD; 
     border-left: 2px solid #666; 
     border-right: 2px solid #666; 
     width: 280px; 
     margin: 0 auto; 
     } 
     * html #container { height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <h1>100% Height Div</h1> 
     <p>Lorem ipsum ...</p> 
    </div> 
    </body> 
</html>

Ecco come si presenta:

alt text http://i41.tinypic.com/1j1do8.jpg

Quando dico "altezza 100%" - voglio dire che rimane tutta altezza indipendentemente dalla quantità di contenuto presente nel div e indipendentemente da come viene ridimensionata la finestra.

Ma è possibile ottenere un div con un'altezza di altezza "quasi 100%"? Se voglio margini in alto e in basso, posso farlo?

voglio farlo sembrare come questo:

alt text http://i44.tinypic.com/j76kvl.jpg

posso farlo con JavaScript + CSS. Posso farlo solo con i CSS?

Risposta:
Sì, è possibile con posizionamento assoluto.

#container { 
    width: 380px; 
    background-color: #DDD; 
    border: 2px solid #666; 
    position: absolute; 
    top: 20px; /* margin from top */ 
    bottom: 20px; /* margin from bottom */ 
    left: 50%; /* start left side in middle of window */ 
    margin-left: -190px; /* then, reverse indent */ 
    overflow: auto; /* scrollbar as necessary */ 
    }

Risultato:

alt text http://i42.tinypic.com/33vj3nq.jpg

Grazie to keithjgrant for the answer. Vedi tutto il codice allo http://jsbin.com/otobi.

fonte

2010-03-22 Cheeso

Non è possibile eseguire questa operazione aggiungendo _padding: 20px 0 20px 0; _ allo stile di id #container? – amelvin

No, perché il riempimento e il margine vengono aggiunti all'altezza/larghezza. Quindi questo renderebbe un'altezza del 100% + 40px. – poke

è necessario creare un inner-container all'interno del contenitore e quindi aggiungere il padding a quello – stephenmurdoch

Prova posizionamento assoluto:

#container { 
    position: absolute; 
    top: 20px; 
    bottom: 20px; 
}

Può essere eccentrico in IE6 (? Ciò che non è), ma ci sono un sacco di trucchi per provare se google in giro. Alcuni includono l'aggiunta di una regola clear: both o il wrapping del div posizionato in modo assoluto all'interno di un altro div.

Un overflow: auto dovrebbe comportarsi come mostrato nella barra di scorrimento.

edit: In alternativa, si potrebbe aggiungere 20px imbottitura per un div involucro, quindi impostare il vostro contenitore per height: 100% senza margini, e dovrebbe riempire all'imbottitura del suo involucro.

fonte

2010-03-23 15:42:47 keithjgrant

Funziona, grazie! – Cheeso

Non so se mi sono perso qualcosa, ma perché non aggiungere margin-top: 20px; margin-bottom: 20px a #container, se vuoi i margini?

fonte

2010-03-22 23:00:13

@poke ha scritto: "No, perché padding e margine sono aggiunti all'altezza/larghezza. Quindi questo renderebbe un 100% + 40px altezza." –

Due opzioni:

1) È possibile utilizzare qualcosa di simile

#theDiv { 
    top: 16px; 
    bottom: 20px; 
}

ma questo funziona solo su standard browser conformi e IE> = 7, come IE 6 non renderà correttamente quando il tuo div utilizzando sia topebottom.

2) È possibile modificare la box model per includere i bordi in alto e in basso all'interno un dato height. Usa qualcosa come

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -khtml-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; /* IE >= 8 */ 
}

in modo da poter falso top e bottom utilizzando

#theDiv { 
    border-top: 16px; 
    border-bottom: 20px; 
}

e mettere IE 6 e 7 in quirks mode (mettendo qualcosa, ad esempio un commento HTML, prima che il DOCTYPE) da utilizzare border-box modello box.

Se si desidera supportare IE 6, sarà necessario utilizzare # 2.Quindi in IE 6 puoi usare la modalità quirks solo quando vuoi questo (l'unica altra opzione per supportare questo in IE 6 è usare le espressioni CSS, ma sono molto intensi per la CPU, poiché il motore J (ava) Script di IE deve ricalcolare quelli larghezze e altezze ad ogni ridimensionamento).

fonte

2010-03-22 23:09:39

MS supporta effettivamente '-ms-box-dimensionamento'? So che '-ms-box-radius' non funziona nemmeno in IE8. –

@TheEl: in base alla pagina collegata (http://www.quirksmode.org/css/box.html), sì, e in base a questo (stupidamente progettato) PDF http://download.microsoft.com/download/ F/F/E/FFEB6B00-64B9-450F-93B3-2781D9F36210/BoxSizing-DeveloperSeriesInformationPage.pdf, IE 8 supporta sia "dimensionamento della scatola" che "dimensionamento della casella -ms". –

Non è preciso come CSS ma è possibile aggiungere un tag BR all'esterno del contenitore nella parte superiore e inferiore e regolare il margine del 100% minimo come 90-95%.

fonte

2010-03-22 23:13:55 MaxGeek

a destra. funziona ma non reagisce bene al ridimensionamento. – Cheeso

Si potrebbe utilizzare una seconda div all'interno con un'imbottitura per realizzare il vero e proprio "esterno" padding:

<div style="height: 100%; width: 500px; margin: 0 auto; background: #CCC; border: solid #999; border-width: 0px 2px;"> 
<div style="padding: 20px 0px;"> 
    Content here 
</div> 
</div>

In alternativa, se non visualizzare qualsiasi altra cosa, è anche possibile utilizzare il body per l'esterno costruzione.

edit: In realtà, si dovrà utilizzare min-height per il div esterno, per mantenere lo sfondo lavorando quando la pagina è superiore al 100% della dimensione dello schermo. Questo per esempio funziona bene:

<?xml version="1.0" encoding="utf-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
<title>Test</title> 
<style type="text/css"> 
    html 
    { height: 100%; padding: 0; margin: 0; background: #FFF; } 
    body 
    { min-height: 100%; margin: auto; width: 500px; 
    background: #CCC; border: solid #999; border-width: 0 2px; } 
    div#main 
    { padding: 20px 15px; } 
</style> 
</head> 

<body> 
<div id="main"> 
<h1>100% Height Div</h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis 
    parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec 
    pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, 
    rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo 
    ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
    dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus 
    varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel 
    augue.</p> 
</div> 
</body> 
</html>

fonte

2010-03-22 23:14:35 poke

Funziona su IE6? Ad ogni modo, @Cheeso vuole supportare IE6? –

Iirc, IE6 non supporta 'min-height', ma dubito che ci sia qualche altro metodo che faccia funzionare (senza usare javascript, ovviamente). Tuttavia, ogni browser successivo lo supporta. – poke

Ho provato questo e non ottengo un margine sul div. – Cheeso

CSS: è possibile ottenere un div che è al 100% di altezza, meno un margine superiore e inferiore?

risposta

Problemi correlati