Bordo intorno al 100% altezza e larghezza del corpo (HTML 4.01 Rigoroso)

Ok, questo mi sta facendo impazzire in questo momento.Bordo intorno al 100% altezza e larghezza del corpo (HTML 4.01 Rigoroso)

Voglio avere un bordo intorno al mio documento. Dovrebbe essere piacevolmente andare in giro per l'intera finestra/viewport. Così definisco:

body { 
    border: 1px solid red; 
}

Quando il mio documento è in modalità quirks, funziona perfettamente. Almeno in IE, che è il mio obiettivo principale qui. Un bordo rosso si presenta ai bordi della mia pagina, ovviamente perché i CSS body e html predefiniti sono impostati per riempire lo schermo.

Quando si va in modalità standard impostando un HTML 4.01 Strict DOCTYPE, body e html crollo alla reale (più piccola) dimensioni del contenuto , il confine è disegnato a destra attraverso il centro dello schermo. Così mi definisco:

body, html { padding: 0px; margin: 0px; border: 0px none; width: 100%; height: 100%; } body { border: 1px solid red; }

E ho — barre di scorrimento, lo scorrimento esattamente un pixel per mostrare i bordi di destra in basso /. Tuttavia, voglio che il confine sia visibile subito.

Esiste un metodo senza cazzate (come "altezza: 99,9%;", "overflow: nascosto;" o "ritorna alla modalità quirk") per ottenere un bordo al 100%, senza barre di scorrimento non necessarie? IE-only va bene, il cross-browser sarebbe meglio, ovviamente.

fonte

2009-05-20 Tomalak

IE-only per l'applicazione intranet? L'unico posto in cui potresti ottenere il 100% di utenti non IE? Pazzo! :) – Kornel

Gli ambienti aziendali e Firefox si escludono a vicenda. Almeno il 99% percento delle volte. E fino a quando Mozilla finalmente * avrà * l'autenticazione NTLM manuale (o giocherellando con about: config su una base per client) davvero non la taglierà, resterà così. – Tomalak

Configurazioni remote. http://wetdog.sourceforge.net/ – SpliFF

Come Spliff già accennato, il problema è perché il valore predefinito (W3C) box model è 'content-box' , che si traduce in confini al di fuori del width e height. Ma vuoi che siano entro la larghezza e l'altezza del 100% che hai specificato. Una soluzione alternativa consiste nel selezionare il modello della casella border-box, ma non è possibile farlo in IE 6 e 7 senza ripristinare la modalità quirks.

Un'altra soluzione funziona anche in IE 7. Basta impostare html e body a 100% di altezza e overflow a hidden per sbarazzarsi delle barre di scorrimento della finestra. Quindi è necessario inserire un div wrapper posizionato in modo assoluto che ottiene il bordo rosso e tutto il contenuto, impostando tutti i quattro box offset properties a 0 (in modo che il bordo rimanga ai bordi della finestra) e overflow a auto (per inserire le barre di scorrimento all'interno del wrapper div).

C'è solo uno svantaggio: IE 6 non supporta l'impostazione sia lefteright ed entrambi topebottom. L'unica soluzione per questo è utilizzare CSS expressions (all'interno di un commento condizionale) per impostare in modo esplicito la larghezza e l'altezza del wrapper sulle dimensioni della finestra, meno la larghezza del bordo.

Per rendere più facile vedere l'effetto, nel seguente esempio ho allargato la larghezza del bordo di 5 pixel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #wrapper { 
     position: absolute; 
     overflow: auto; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     border: 5px solid red; 
    } 
    </style> 
    <!--[if IE 6]> 
    <style type="text/css"> 
    #wrapper { 
     width: expression((m=document.documentElement.clientWidth-10)+'px'); 
     height: expression((m=document.documentElement.clientHeight-10)+'px'); 
    } 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <div id="wrapper"> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    </div> 
</body> 
</html>

PS: Ho appena visto che non ti piace overflow: hidden, hmmm .. .

Aggiornamento: sono riuscito a spostarsi utilizzando overflow: hidden fingendo un bordo con quattro div che si attaccano ai bordi della finestra (non si può solo o mostra l'intera finestra con un div di dimensioni complete, poiché tutti gli elementi sottostanti non sarebbero più accessibili). Non è una buona soluzione, ma almeno le normali barre di scorrimento rimangono nella loro posizione originale. Non riuscivo a far sì che IE 6 simulasse il posizionamento fisso usando le espressioni CSS (ho avuto problemi con i div di destra e di fondo), ma sembrava orribilmente in ogni caso poiché quelle espressioni erano very expensive e il rendering diventava noiosamente lento.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    #border-t, #border-b, #border-l, #border-r { 
     position: fixed; 
     background: red; 
     z-index: 9999; 
    } 

    #border-t { 
     left: 0; 
     right: 0; 
     top: 0; 
     height: 5px; 
    } 

    #border-b { 
     left: 0; 
     right: 0; 
     bottom: 0; 
     height: 5px; 
    } 

    #border-l { 
     left: 0; 
     top: 0; 
     bottom: 0; 
     width: 5px; 
    } 

    #border-r { 
     right: 0; 
     top: 0; 
     bottom: 0; 
     width: 5px; 
    } 
    </style> 
</head> 
<body> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    <div id="border-t"></div><div id="border-b"></div> 
    <div id="border-l"></div><div id="border-r"></div> 
</body> 
</html>

fonte

2010-06-29 12:12:29

+1, almeno questa è una spiegazione decente. Sì, il 'overflow: hidden' è un po 'hacky, ma immagino che non ci sia modo di aggirarlo. Sembra che la mia richiesta originale sia impossibile da soddisfare, ma anche questa è una risposta. – Tomalak

PS: buona soluzione per il tuo aggiornamento! Darei un secondo +1 se potessi. :) – Tomalak

@Tomalak: l'ho fatto per te. ;-) – Chris

Fino a quando CSS3 non ci fornisce i bordi interni e la commutazione di box-model sono necessari due div. Il primo a dare il 100% di altezza e il secondo a fornire il bordo. Altrimenti il bordo si estende all'esterno dell'altezza 100% (cioè 1px + 100% + 1px)

BTW. Dovresti raccogliere alcune statistiche prima di passare a "IE only". IE non ha il market share che ha fatto una volta. Ovunque tra il 10 e il 30% dei tuoi utenti potrebbe trovarsi su altri browser.

fonte

2009-05-20 08:35:17 SpliFF

È un'applicazione Intranet. È abbastanza sicuro dire che è solo IE.;-) – Tomalak

Provare a impostare i bordi per l'elemento html. L'elemento body è alto quanto è necessario, ma, per quanto mi ricordi, l'elemento html occupa tutto lo spazio (è dove devi impostare anche lo sfondo).

Non sono sicuro di come appaiono i bordi, di solito solo gli sfondi.

fonte

2009-05-20 08:43:06

Non funziona, lo stesso problema. L'elemento HTML è anche così alto/ampio come deve essere quando il documento è in modalità standard. Il margine negativo – Tomalak

il bordo non è al 100%. Prova padding: -1px o margin: -1px.

fonte

2009-05-20 08:47:35

ha eliminato il bordo dal documento, il riempimento deve essere positivo nelle specifiche CSS. – SpliFF

Ecco una soluzione semplice che utilizza solo gli elementi html e body (nessuna necessità di div nidificati). Sfrutta il comportamento speciale dell'elemento HTML (non può avere un bordo esterno, quindi deve ridursi per visualizzarlo).

<html> 
<head> 
<style> 
html {padding:0; margin:0; border:5px solid red;} 
body {height:100%; padding:0; margin:0; border:0;} 
</style> 
</head> 

<body> 

</body> 
</html>

fonte

2009-05-20 08:57:17 SpliFF

Bello. A questo proposito, non conoscevo le "proprietà speciali" dell'elemento HTML. Buono a sapersi. – Tomalak

Non sembra funzionare in modalità standard, però. L'altezza HTML si riduce nuovamente e impostandola al 100% risulta in una barra di scorrimento verticale. – Tomalak

È necessario utilizzare Internet Exploiter. Funziona con 4.01 Strict su FF, quindi probabilmente stai vedendo un bug del browser. – SpliFF

Questo ti piacerà molto.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 

<style> 
html { 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    display: table-row; 
} 
#wrapper { 
    display: table-cell; 
    border: 5px solid red; 
} 
</style> 
</head> 

<body> 
    <div id="wrapper"></div> 
</body> 
</html>

http://www.test.dev.arc.net.au/100-percent-border.html

ho capito perché le tabelle tenere un sacco di comportamento "bizzarro", anche in modalità standard che potrebbe essere la soluzione. Trasformare l'elemento HTML in una tabella è piuttosto divertente.

Prima di contrassegnarlo per non funzionare in IE6, considerare che è un problema molto banale da risolvere.Il punto è che utilizzando l'algoritmo di disegno tabella è la soluzione, e una soluzione CSS puro è anche possibile:

<table class="outer"><tr><td class="inner"> ...page content...

fonte

2009-05-21 15:29:43 SpliFF

L'unica soluzione sulla pagina che funziona effettivamente e viene contrassegnata in basso ?? WTF? – SpliFF

Hmm .. indovina perché non funziona in IE6? ma allora questo è quello che è per IE7-js. – SpliFF

funziona ** in misura **. se hai div più posizioni posizionate relativamente, per qualsiasi motivo il primo div occuperà la maggior parte dello spazio e ogni div diverrà solo una scheggia dello schermo, invece di ogni pagina occuperà un'intera pagina:/perché è Questo?!?!?! – Anthony

E 'anche un po' brutto, ma dando al corpo

position:relative; 
top:-1px; 
left:-1px;

ha lavorato per me.

fonte

2010-07-29 08:19:21 acme

Vale anche la pena provare. Ed è solo * un po 'brutto, non serio. – Tomalak

Bordo intorno al 100% altezza e larghezza del corpo (HTML 4.01 Rigoroso)

risposta

Problemi correlati